Every React 19 Feature Explained in 8 Minutes

Code Bootcamp
26 Mar 202407:35

Summary

TLDRReact 19のアップデートは、書くコードよりも削除できるコードに焦点を当てています。新しいコンパイラにより、パフォーマンスの問題を考慮する必要がなく、useCallback、useMemoなどのメモ化ツールは不要になります。また、forwardRefの代わりに、refをシンプルに道具として扱うことができ、usehookとuseの新しいhooksがデータ取得とコンテキスト利用を簡素化します。また、React 19では、useActions、useFormStatus、useFormStateなどの新しい機能が追加され、フォームの扱いが簡単になりました。

Takeaways

  • 🚀 React 19のアップデートは、書くコードよりも削除できるコードに重点を置いた更新です。
  • 🌟 React 19はまだ安定版リリースされておらず、Canary版をインストールして新機能を利用できます。
  • 🛠️ ReactコンパイラはReactコードを通常のJavaScriptに変換し、アプリのパフォーマンスを向上させます。
  • 🔄 手动でのパフォーマンス最適化は不要になり、useCallbackやuseMemoなどのフックは削除できます。
  • 🔗 forwardRef関数も不要になり、refを子コンポーネントに渡す方法が簡素化されました。
  • 🌐 use钩子はuseEffectとuseContextの機能を統合し、データ取得とコンテキストの利用を簡素化します。
  • 📜 指令はNext.jsで使用され、Reactコンポーネントのクライアントまたはサーバーでの実行を指示します。
  • 📝 Actions機能はフォームとの相互作用を簡素化し、クライアントやサーバーで実行可能にします。
  • 🔒 useFormStatusフックはフォームの送信状況を把握し、例えば送信中のボタンの無効化に役立ちます。
  • 🔄 useFormStateフックは状態管理とフォームアクションの実行を組み合わせ、非同期処理に対応。
  • 🎯 useOptimisticフックはリアルタイムアプリケーションに最適で、最適化の更新を即座に行い、サーバーと同期します。

Q & A

  • React 19の主なアップデートは何ですか?

    -React 19の主なアップデートは、コンパイラの導入です。これにより、Reactコードが通常のJavaScriptに変換され、全体的なアプリのパフォーマンスが向上します。また、パフォーマンスに関する細かい操作を考えることが必要なくなります。

  • React 19で削除できるReactコードは何ですか?

    -React 19では、パフォーマンスフック(例えばuseCallback, useMemo, useEffect, useContext)を完全に削除することができます。新しいコンパイラがコードを自動的に最適化するためです。

  • React 19において、forwardRef関数を使わなくなる理由は何ですか?

    -React 19では、refを子コンポーネントに渡す方法が変わりました。以前はforwardRefを使用してrefを渡していましたが、新しい方法では、refをpropsとして直接渡すことができます。

  • use hookはどのような機能を提供しますか?

    -use hookは、複数の異なるリソースを非同期的に読み込むことができます。Promiseを解決するか、コンテキストを解決することが可能です。このマルチプルースフックは、useEffect(データ取得などに使用)とuseContext(コンテキストデータの読み取りに使用)の両方を効果的に置き換えることができます。

  • React 19で導入されたdirectivesは何ですか?

    -directivesは、Next.jsなどのフレームワークで使用されることがある機能です。文字列として、Reactコンポーネントをクライアントまたはサーバーで実行したい場所を指示することができます。

  • React 19でのactions機能は何ですか?

    -actionsは、フォームが送信されるときに呼び出される関数です。これらの関数は、フォーム要素のactionプロップに接続されます。React 19では、actionsがクライアントまたはサーバーで実行されることが可能です。

  • use form status hookは何を提供しますか?

    -use form status hookは、フォーム送信が保留中であるかどうかに関する情報を提供します。これにより、フォーム送信中のサブミットボタンの無効化などの処理を行うことができます。

  • use form state hookはどのように使いますか?

    -use form state hookは、ステートフルなactionを扱うために使用されます。これは、useState hookと似ていますが、新しいステートを設定するためにaction関数を使用します。例えば、フォーム送信時にデータベースにアイテムを追加する場合、このhookを使用して、操作が成功したかどうかをユーザーに通知することができます。

  • use optimistic hookは何を達成しますか?

    -use optimistic hookは、リアルタイムアプリケーション(例えばチャットアプリケーション)で最適なアップデートを即座に行うために使用されます。サーバーに反映される前に、ユーザーインターフェースを一時的に更新し、サーバーから応答が戻ってきたら実際のサーバーステートに置き換えることができます。

  • React 19のcomplete guideとcheat sheetはどこで入手できますか?

    -React 19に関するcomplete guideとcheat sheetは、React Boot Campから無料で入手することができます。このガイドでは、React 19で学ぶために必要なすべての情報を提供し、実際のコードとライブサンプルを含んでいます。

  • React 19の新機能により、データ取得の方法はどのように変わりますか?

    -React 19の新機能により、use hookを使用してデータ取得を行うことができます。これには、fetch関数を解決しながらデータを取得し、React Suspenseコンポーネントを使用してフォールバックUIを表示する流れが含まれます。これにより、useEffectを使ったデータ取得よりもクリーンで読みやすいコードになります。

Outlines

00:00

🚀 React 19の新機能とパフォーマンス改善

React 19のアップデートは、コードを書く必要が少なくなくなったこと、自動化されたパフォーマンス最適化、そして新機能の追加をもたらしました。このバージョンの中心であるReactコンパイラは、Reactコードを通常のJavaScriptに変換し、アプリの全体的なパフォーマンスを向上させます。また、useCallback、useMemo、useCallbackなど、手動でのパフォーマンス最適化ツールが不要となり、コードの簡素化が図られます。さらに、forwardRef関数の不要さから、propsの扱い方にも変更がありました。

05:01

🔍 React 19の新しいHookとDirectives

React 19では、新しいHookが追加され、既存のHookを効果的に置き換えることができます。useHookは、データ取得やコンテキストの読み取りを簡素化し、useEffectとuseContextを一つのHookで置き換えることができます。また、Directivesの導入により、コンポーネントのクライアントまたはサーバーでの実行を指定できます。また、ActionsとuseFormState、useOptimisticUpdateなどの新機能も導入され、フォームの扱いやリアルタイムアプリケーションの改善に役立ちます。

Mindmap

Keywords

💡React

Reactは、Facebookが開発したJavaScriptライブラリで、ウェブアプリケーションの開発に利用されます。この動画では、Reactのバージョン19が紹介されており、その新機能やパフォーマンス向上について説明されています。

💡Compiler

コンパイラは、Reactコードを通常のJavaScriptに変換するプログラムです。これにより、アプリケーションの全体的なパフォーマンスが向上し、開発者がパフォーマンスに関する考慮を減らすことができます。

💡Performance

パフォーマンスは、アプリケーションがどれだけ効率的に動作するかを指す重要な要素です。React 19の更新では、コンパイラの活用によりパフォーマンスが向上し、不要なレンダリングを防ぐための手動メモ化ツールなどの使用が不要になります。

💡Hooks

フックは、Reactの機能で、ステートを保持しながら関数型コンポーネントを使用できるようにします。React 19では、新しいフックが追加され、より効率的なコードを書くことができます。

💡memoization

メモ化は、計算結果をキャッシュして再利用することで、同じ計算を繰り返し行わないようにするテクニックです。React 19のコンパイラは、自動的にメモ化を適用所以、手動でのメモ化ツールの使用が不要になります。

💡forwardRef

forwardRefは、Reactで参照を子コンポーネントに渡すために使用されるフックです。React 19以前は、forwardRef関数を使用して参照を渡す必要がありましたが、新しいバージョンでは、より簡単な方法で参照を渡すことができます。

💡React Suspense

React Suspenseは、非同期操作が完了するまで、代替UIを表示するためのReactコンポーネントです。この機能は、データの取得や処理中にユーザーにフィードバックを与えるために使用されます。

💡Context

Contextは、Reactアプリケーションでデータを共有するための機能です。コンテキストを使用することで、親コンポーネントから子コンポーネントにデータを渡すことができます。React 19では、useHookによりコンテキストデータの読み取りが簡素化されます。

💡Directives

ディレクティブは、Reactコンポーネントがクライアントまたはサーバーで実行される場所を指示するための文字列です。Next.jsなどのフレームワークでは、ディレクティブを使用して、コンポーネントの実行先を指定することができます。

💡Actions

アクションは、フォームが送信されるときに呼び出される関数です。アクションは、フォームのactionプロパティに接続され、サーバーまたはクライアントで実行することができます。React 19では、アクション機能が強化され、フォーム操作の簡素化が期待できます。

💡useFormState

useFormStateは、React 19で新たに導入されたステートフルアクションフックで、アクション関数を介して状態を設定することができます。これにより、フォームのデータの取得や更新が簡単になります。

💡useOptimistic

useOptimisticは、React 19で新たに導入されたフックで、最適化更新を実行することができます。これは、リアルタイムアプリケーションなどで、サーバーから応答を待つ前にユーザーインターフェイスを更新するために使用されます。

Highlights

React 19 introduces major updates that focus on reducing the amount of code developers need to write.

The new version is not yet stable, but developers can install the canary version to start using the features.

React 19's compiler is a key innovation, converting React code into regular JavaScript to improve app performance.

Developers will no longer need to use manual memoization tools like `useCallback`, `useMemo`, and `useEffect` for performance optimization.

The new compiler optimizes React code automatically, allowing for the removal of performance hooks.

In React 19, the `forwardRef` function is no longer necessary, simplifying ref passing to child components.

The `use` hook in React 19 can load various resources asynchronously, effectively replacing `useEffect` and `useContext`.

Fetching data with `use` is cleaner and easier than with `useEffect`, involving promise resolution and the `React.Suspense` component.

Reading context data is simplified in React 19, with `use` being able to consume context directly without `useContext`.

Directives are a new feature in React 19, similar to those in Next.js, allowing specification of where a component should run - client or server.

Actions in React 19 are functions called upon form submission, which can now be executed on the server or client.

The `useFormStatus` hook provides information about form submissions, helping manage UI states like disabling the submit button.

The `useFormState` hook is a stateful action tool, allowing for setting state based on action function results.

The `useOptimistic` hook is ideal for real-time apps, enabling immediate UI updates with optimistic messages until server confirmation.

A comprehensive guide and cheat sheet for React 19 is available, including all concepts, code, and live examples.

Transcripts

play00:00

react has got a major update in version

play00:02

19 but before you get alarmed about how

play00:05

much time it'll take to learn a new

play00:06

version of react I want to give you some

play00:09

good news react 19 is less about the

play00:11

code you have to write and more about

play00:13

the code you don't have to write anymore

play00:16

let's take a look at what react code

play00:18

you'll be able to remove in react 19

play00:21

plus some new features it offers to help

play00:23

you build your react projects faster as

play00:26

of today react 19 is not yet a stable

play00:28

release so if your react version is less

play00:31

than 19 you can install the canary

play00:33

version of react to start using these

play00:35

features today the biggest part of this

play00:38

new version is the react compiler most

play00:40

of the features that are in react 19 are

play00:42

due to the compiler so what does it do

play00:45

the react compiler will convert your

play00:47

react code into regular JavaScript the

play00:50

main benefit of this is to improve your

play00:52

overall app performance but what's even

play00:54

better is that it removes the need for

play00:56

you to think as much about performance

play00:59

that means you know longer have to use

play01:01

manual memoization tools like use

play01:03

callback use memo and memo these tools

play01:06

were necessary to prevent unnecessary

play01:08

renders but they are hard to use

play01:10

properly even with react reminding you

play01:13

to use them in the console in this code

play01:15

for example use callback prevents the

play01:18

increment function from being recreated

play01:20

on each render and use memo is used to

play01:23

recompute the double count value only

play01:25

when count changes but now the new

play01:28

compiler optimizes your re react code

play01:30

automatically so you can completely

play01:32

remove any performance hooks you

play01:34

previously had and it gets even better

play01:37

in react 19 you also no longer need to

play01:39

use the forward ref function up until

play01:42

now if you wanted to pass a ref to a

play01:44

child component you would first create a

play01:46

ref then pass that ref as a prop to your

play01:49

child component but to access it you had

play01:51

to use forward ref now without forward

play01:54

ref take a look at the difference we can

play01:56

pass ref as a promp and use it just like

play01:58

we would any other prop which is a

play02:01

really nice Improvement but there's even

play02:03

more react code to remove you can do

play02:05

that with the new use hook which lets us

play02:07

load a number of different resources

play02:10

asynchronously use can resolve promises

play02:12

or context it's a multi-purpose hook

play02:15

which means it can effectively replace

play02:17

two major hooks it can replace use

play02:20

effect for things like data fetching and

play02:22

it can replace use context for reading

play02:24

context data in the past if you wanted

play02:27

to fetch data from an API with use

play02:29

effect you've first needed to make the

play02:31

API request inside use effect then put

play02:34

that return data somewhere usually in a

play02:36

state variable with used State and

play02:38

finally display that updated state in

play02:40

the UI after handling loading and error

play02:43

cases fetching data with the use hook on

play02:46

the other hand involves resolving the

play02:48

fetch function which returns a promise

play02:51

while fetching data you use the react

play02:53

suspense component to show a fallback UI

play02:56

and once the promise is resolved we can

play02:58

show the fetch data in the UI

play03:00

and all this is a lot cleaner and easier

play03:02

to read than with use effect to read

play03:05

data from react context before react 19

play03:07

you used the Ed context hook like in

play03:10

this example where we're displaying the

play03:12

user's name you first create your

play03:14

context then wrap the context provider

play03:17

around the components that will use the

play03:19

context data and then read that data

play03:22

with used context by giving it the

play03:24

context object but now use can consume

play03:27

context for us as well just replace use

play03:31

context with use and you're done

play03:34

directives are another big but simple

play03:36

change to react if you've used nextjs

play03:39

lately you've probably already seen them

play03:41

directives are just strings which we can

play03:43

add to the top of component files

play03:46

directives let us tell react where we

play03:48

want to run a react component on the

play03:50

client with use client or on the server

play03:53

with use server Now actions are a great

play03:56

new feature that make working with forms

play03:58

a lot easier actions are just functions

play04:00

that are called when a form is submitted

play04:03

these functions are connected to the

play04:05

action prop of any form element and with

play04:07

react 19 actions can now be executed on

play04:10

the server or client here's a simple

play04:13

client action example where we're

play04:15

alerting the user what they typed into

play04:17

an input for this example you first

play04:19

write use client at the top of your file

play04:21

to make sure it runs on the client then

play04:24

connect the form action function to the

play04:26

action prop of the form and if you name

play04:29

the input you can access the input's

play04:31

value by writing form data get name

play04:35

however if your action is asynchronous

play04:37

you won't know exactly when your form

play04:39

submission will finish to prevent the

play04:41

form from being submitted again before

play04:43

it finishes you can use the use form

play04:46

status Hook from react Dom it'll give

play04:49

you information about when the

play04:50

submission is pending and this is

play04:52

helpful for doing things like disabling

play04:54

the submit button during a form

play04:56

submission here's how it works you'll

play04:58

first create a nested component inside

play05:00

your form inside that component you'll

play05:03

call use form status to get the pending

play05:05

property and finally pass the pending

play05:08

property to the disabled prop but what

play05:10

if you want the data returned from an

play05:12

action function for that you can use a

play05:14

new stateful action hook called use form

play05:17

State it's pretty similar to the use

play05:19

State hook except it uses an action

play05:21

function to set the new state to make a

play05:24

simple counter using a form you first

play05:27

give use form State an action function

play05:29

to call and an initial State value when

play05:32

the action is called you can access both

play05:34

the previous state value and the form

play05:36

data that was submitted finally to set

play05:39

State you return the new state from the

play05:41

action and use it in your component a

play05:44

more advanced use case for use form

play05:46

state is an add to cart button for an

play05:48

e-commerce app to set this up you pass

play05:51

an add to cart action to use form State

play05:54

the product ID is on a hidden input

play05:57

which is passed to form data when the

play05:58

form is submitted

play06:00

within the add to cart function you use

play06:02

that ID to check if the product can be

play06:04

added to the cart and finally return a

play06:06

message to the user telling them whether

play06:08

the operation was successful or not but

play06:11

making the user wait for the result of

play06:13

an action isn't a great experience for

play06:15

them so what can you do to fix it this

play06:17

is a great use case for the new use

play06:19

optimistic hook which performs an

play06:21

optimistic update it's ideal for

play06:24

realtime apps such as a chat app to

play06:26

immediately update the user interface

play06:28

with what the user sub Ed if a user

play06:30

submits a message you could perform an

play06:32

optimistic update and tell the user the

play06:35

message is being sent and afterwards

play06:37

update it with the server State when it

play06:39

is actually added to the database to add

play06:43

this functionality you would first

play06:44

create a separate piece of State for

play06:46

your messages and then pass that state

play06:48

to the use optimistic hook within the

play06:50

action you then perform an optimistic

play06:52

update and this is a temporary update to

play06:55

add the new message to State while

play06:57

you're waiting on the server's response

play06:59

and when it comes back you can replace

play07:01

the temporary client state with your

play07:03

actual server State and that is react 19

play07:06

in a nutshell now if you want to lock in

play07:09

everything in react 19 I've made a

play07:11

complete guide that covers everything

play07:13

you need to know with a complete cheat

play07:15

sheet of all the concepts all the code

play07:17

in this video plus live examples for you

play07:19

to use right now you can grab all that

play07:21

for free at react boot camp. I hope you

play07:25

learned a lot in this video and I'll see

play07:26

you in the next

play07:28

one

Rate This

5.0 / 5 (0 votes)

Related Tags
React更新コード最適化パフォーマンス新機能開発効率コンパイラ非同期処理フォーム簡素化リアタイムアプリReact Boot Camp
Do you need a summary in English?