Every React 19 Feature Explained in 8 Minutes

Summary

React 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などの新機能も導入され、フォームの扱いやリアルタイムアプリケーションの改善に役立ちます。

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

react has got a major update in version

19 but before you get alarmed about how

much time it'll take to learn a new

version of react I want to give you some

good news react 19 is less about the

code you have to write and more about

the code you don't have to write anymore

let's take a look at what react code

you'll be able to remove in react 19

plus some new features it offers to help

you build your react projects faster as

of today react 19 is not yet a stable

release so if your react version is less

than 19 you can install the canary

version of react to start using these

features today the biggest part of this

new version is the react compiler most

of the features that are in react 19 are

due to the compiler so what does it do

the react compiler will convert your

react code into regular JavaScript the

main benefit of this is to improve your

overall app performance but what's even

better is that it removes the need for

you to think as much about performance

that means you know longer have to use

manual memoization tools like use

callback use memo and memo these tools

were necessary to prevent unnecessary

renders but they are hard to use

properly even with react reminding you

to use them in the console in this code

for example use callback prevents the

increment function from being recreated

on each render and use memo is used to

recompute the double count value only

when count changes but now the new

compiler optimizes your re react code

automatically so you can completely

remove any performance hooks you

previously had and it gets even better

in react 19 you also no longer need to

use the forward ref function up until

now if you wanted to pass a ref to a

child component you would first create a

ref then pass that ref as a prop to your

child component but to access it you had

to use forward ref now without forward

ref take a look at the difference we can

pass ref as a promp and use it just like

we would any other prop which is a

really nice Improvement but there's even

more react code to remove you can do

that with the new use hook which lets us

load a number of different resources

asynchronously use can resolve promises

or context it's a multi-purpose hook

which means it can effectively replace

two major hooks it can replace use

effect for things like data fetching and

it can replace use context for reading

context data in the past if you wanted

to fetch data from an API with use

effect you've first needed to make the

API request inside use effect then put

that return data somewhere usually in a

state variable with used State and

finally display that updated state in

the UI after handling loading and error

cases fetching data with the use hook on

the other hand involves resolving the

fetch function which returns a promise

while fetching data you use the react

suspense component to show a fallback UI

and once the promise is resolved we can

show the fetch data in the UI

and all this is a lot cleaner and easier

to read than with use effect to read

data from react context before react 19

you used the Ed context hook like in

this example where we're displaying the

user's name you first create your

context then wrap the context provider

around the components that will use the

context data and then read that data

with used context by giving it the

context object but now use can consume

context for us as well just replace use

context with use and you're done

directives are another big but simple

change to react if you've used nextjs

lately you've probably already seen them

directives are just strings which we can

add to the top of component files

directives let us tell react where we

want to run a react component on the

client with use client or on the server

with use server Now actions are a great

new feature that make working with forms

a lot easier actions are just functions

that are called when a form is submitted

these functions are connected to the

action prop of any form element and with

react 19 actions can now be executed on

the server or client here's a simple

client action example where we're

alerting the user what they typed into

an input for this example you first

write use client at the top of your file

to make sure it runs on the client then

connect the form action function to the

action prop of the form and if you name

the input you can access the input's

value by writing form data get name

however if your action is asynchronous

you won't know exactly when your form

submission will finish to prevent the

form from being submitted again before

it finishes you can use the use form

status Hook from react Dom it'll give

you information about when the

submission is pending and this is

helpful for doing things like disabling

the submit button during a form

submission here's how it works you'll

first create a nested component inside

your form inside that component you'll

call use form status to get the pending

property and finally pass the pending

property to the disabled prop but what

if you want the data returned from an

action function for that you can use a

new stateful action hook called use form

State it's pretty similar to the use

State hook except it uses an action

function to set the new state to make a

simple counter using a form you first

give use form State an action function

to call and an initial State value when

the action is called you can access both

the previous state value and the form

data that was submitted finally to set

State you return the new state from the

action and use it in your component a

more advanced use case for use form

state is an add to cart button for an

e-commerce app to set this up you pass

an add to cart action to use form State

the product ID is on a hidden input

which is passed to form data when the

form is submitted

within the add to cart function you use

that ID to check if the product can be

added to the cart and finally return a

message to the user telling them whether

the operation was successful or not but

making the user wait for the result of

an action isn't a great experience for

them so what can you do to fix it this

is a great use case for the new use

optimistic hook which performs an

optimistic update it's ideal for

realtime apps such as a chat app to

immediately update the user interface

with what the user sub Ed if a user

submits a message you could perform an

optimistic update and tell the user the

message is being sent and afterwards

update it with the server State when it

is actually added to the database to add

this functionality you would first

create a separate piece of State for

your messages and then pass that state

to the use optimistic hook within the

action you then perform an optimistic

update and this is a temporary update to

add the new message to State while

you're waiting on the server's response

and when it comes back you can replace

the temporary client state with your

actual server State and that is react 19

in a nutshell now if you want to lock in

everything in react 19 I've made a

complete guide that covers everything

you need to know with a complete cheat

sheet of all the concepts all the code

in this video plus live examples for you

to use right now you can grab all that

for free at react boot camp. I hope you

learned a lot in this video and I'll see

you in the next

one