React version 19 追加機能をまとめる

チームの勉強会で使用した資料になります。
急いで作成した資料のため、内容として説明不足や間違った解釈をしている箇所があるかもしれません。もしお気づきの方は、ご連絡いただけますと幸いです。

Transcript

1. React version 19 追加機能をまとめる
2. 目次 - React 19 の概要 - React 19 の追加機能① - React 19 の追加機能② - React 19 の追加機能③ - React 19 の追加機能④ - React 19 の追加機能⑤ - まとめ
3. React 19 の概要 追加機能を一言で表すと「フォーム周りの機能」の追加になります。 もう少し具体的に言うと、フォーム周りの機能 = 追加・更新系API を取り扱 う機能になります。
4. React 19 の概要 追加機能を一言で表すと「フォーム周りの機能」の追加になります。 もう少し具体的に言うと、フォーム周りの機能 = 追加・更新系API を取り扱 う機能になります。 CARUの管理画面ではデータの追加・更新・削除の頻度が高いため、今後 Reactのアップデートを行う際に、今回の発表内容を追加したいと思ってい ます。 　　　　　　　　　　　　　　　　　　　　　　　React 19 公式のブログ 関わっているサービス名のため伏せてます
5. 追加機能①
6. React 19 の追加機能① useTransition バックグラウンドで UI の一部をレンダリングできる React Hook です。 本来は、React 18 のバージョンで追加されましたが、React 19 で非同期処 理でも使用できるよう拡張が行われました。
7. React 19 の追加機能① useTransition バックグラウンドで UI の一部をレンダリングできる React Hook です。 本来は、React 18 のバージョンで追加されましたが、React 19 で非同期処 理でも使用できるよう拡張が行われました。 簡単に説明すると、非同期の処理が完了するまでの待機状態（pending）を 管理してくれます。
8. React 19 の追加機能① const [name, setName] = useState(""); const [isPending, startTransition] = useTransition(); const handleSubmit = () => { startTransition(async () => { const res = await updateName({id: "", name}); if (!res.id) { console.error(“error”) } }) }; return ( <> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}>Update</button> <> );
9. React 19 の追加機能① const [name, setName] = useState(""); const [isPending, startTransition] = useTransition(); const handleSubmit = () => { startTransition(async () => { const res = await updateName({id: "", name}); if (!res.id) { console.error(“error”) } }) }; return ( <> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}>Update</button> <> ); 待機中かどうかの値（isPending）と待機中かど うかを判別するための関数を返します
10. React 19 の追加機能① const [name, setName] = useState(""); const [isPending, startTransition] = useTransition(); const handleSubmit = () => { startTransition(async () => { const res = await updateName({id: "", name}); if (!res.id) { console.error(“error”) } }) }; return ( <> <input value={name} onChange={(event) => setName(event.target.value)} /> <button onClick={handleSubmit} disabled={isPending}>Update</button> <> ); 待機中かどうかの値（isPending）と待機中かど うかを判別するための関数を返します 非同期の処理を行なっている箇所を包括する形 で判別の関数を使用し、待機中の値の更新を行 なってくれます
11. 追加機能②
12. React 19 の追加機能② useActionState フォームアクションの結果に基づいて状態を更新できる React Hook です。 データの更新を行う際に、その更新結果や状態を使用する場合に活用するこ とができる機能になっています。
13. useActionState フォームアクションの結果に基づいて状態を更新できる React Hook です。 データの更新を行う際に、その更新結果や状態を使用する場合に活用するこ とができる機能になっています。 簡単に説明すると、データ更新を行うためのデータ本体や更新処理、待機状 態などを管理してくれます。 React 19 の追加機能②
14. React 19 の追加機能② const [name, setName] = useState(""); const [state, submitAction, isPending] = useActionState( () => updateName({ id: "", name }), { id: "", name } ); return ( <form action={submitAction}> <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit" disabled={isPending}>Update</button> {state && <p>{ state.name }</p>} </form> )
15. React 19 の追加機能② const [name, setName] = useState(""); const [state, submitAction, isPending] = useActionState( () => updateName({ id: "", name }), { id: "", name } ); return ( <form action={submitAction}> <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit" disabled={isPending}>Update</button> {state && <p>{ state.name }</p>} </form> ) フォームの値（state）、フォームの送信の関数 (submitAction)、待機中かどうかの値 （isPending）の値をそれぞれ返します。
16. React 19 の追加機能② const [name, setName] = useState(""); const [state, submitAction, isPending] = useActionState( () => updateName({ id: "", name }), { id: "", name } ); return ( <form action={submitAction}> <input type="text" name="name" value={name} onChange={(e) => setName(e.target.value)} /> <button type="submit" disabled={isPending}>Update</button> {state && <p>{ state.name }</p>} </form> ) フォームの値（state）、フォームの送信の関数 (submitAction)、待機中かどうかの値 （isPending）の値をそれぞれ返します。 第一引数に、フォームの送信の関数を渡し、第 二引数にフォームの初期値を渡します。
17. 追加機能③
18. React 19 の追加機能③ useFormStatus フォーム送信のステータス情報を提供する React Hook です。 <form>タグを使用したフォームの送信を行う際に、そのフォームの更新状 態を子要素でも取得できるようになる機能になっております。
19. React 19 の追加機能③ useFormStatus フォーム送信のステータス情報を提供する React Hook です。 <form>タグを使用したフォームの送信を行う際に、そのフォームの更新状 態を子要素でも取得できるようになる機能になっております。 簡単に説明すると、<form>タグを使用したフォームの送信の待機状態を propsでバケツリレーせずとも、useFromStateで取得することができます。
20. React 19 の追加機能③ const [name, setName] = useState(""); const [state, submitAction] = useActionState( () => updateName({ id: "", name }), null ); return ( <form action={submitAction}> <input value={name} onChange={(e) => setName(e.target.value)} /> <FormStatusItem /> {state && <p>{ state.name }</p>} </form> ) export const FormStatusItem = () => { const {pending, data} = useFormStatus(); return ( <button type="submit" disabled={pending}> Update </button> ) };
21. React 19 の追加機能③ const [name, setName] = useState(""); const [state, submitAction] = useActionState( () => updateName({ id: "", name }), null ); return ( <form action={submitAction}> <input value={name} onChange={(e) => setName(e.target.value)} /> <FormStatusItem /> {state && <p>{ state.name }</p>} </form> ) export const FormStatusItem = () => { const {pending, data} = useFormStatus(); return ( <button type="submit" disabled={pending}> Update </button> ) }; 親のコンポーネントで行われているフォームの 送信に対しての値を取得できます。
22. 追加機能④
23. React 19 の追加機能④ useOptimistic UI を楽観的に更新できる React Hook です。 非同期処理を行う場合に、処理成功後の状態を先にUIに反映を行う機能に なっております。
24. React 19 の追加機能④ useOptimistic UI を楽観的に更新できる React Hook です。 非同期処理を行う場合に、処理成功後の状態を先にUIに反映を行う機能に なっております。 簡単に説明すると、更新を行う際にサーバーに送信するデータを先にUIに反 映し、更新結果を即座にユーザーが見れる状態にすることができます。
25. React 19 の追加機能④ const [name, setName] = useState(""); const [state, setState] = useState([{ id: "", name: "", isPending: false }]); const [optimistic, setOptimistic] = useOptimistic(state, (current, optimisticValue: FormState) => { return [...current, { id: "", name: optimisticValue.name, isPending: true }] }); const handleSubmit = () => { setOptimistic({ id: "", name }); startTransition(async () => { const res = await addName({ id: "", name }); setState((prev) => [...prev, { ...res, isPending: false }]); }) }; return ( <form action={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /><button type="submit">Update</button> { optimistic.map((item) => (<p>{ item.name } { item.isPending ? "Pending" : "Done" }</p>))} </form> );
26. React 19 の追加機能④ const [name, setName] = useState(""); const [state, setState] = useState([{ id: "", name: "", isPending: false }]); const [optimistic, setOptimistic] = useOptimistic(state, (current, optimisticValue: FormState) => { return [...current, { id: "", name: optimisticValue.name, isPending: true }] }); const handleSubmit = () => { setOptimistic({ id: "", name }); startTransition(async () => { const res = await addName({ id: "", name }); setState((prev) => [...prev, { ...res, isPending: false }]); }) }; return ( <form action={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /><button type="submit">Update</button> { optimistic.map((item) => (<p>{ item.name } { item.isPending ? "Pending" : "Done" }</p>))} </form> ); 管理しているデータ（optimistic）と、その データを更新する関数（setOptimistic）を返 す。
27. React 19 の追加機能④ const [name, setName] = useState(""); const [state, setState] = useState([{ id: "", name: "", isPending: false }]); const [optimistic, setOptimistic] = useOptimistic(state, (current, optimisticValue: FormState) => { return [...current, { id: "", name: optimisticValue.name, isPending: true }] }); const handleSubmit = () => { setOptimistic({ id: "", name }); startTransition(async () => { const res = await addName({ id: "", name }); setState((prev) => [...prev, { ...res, isPending: false }]); }) }; return ( <form action={handleSubmit}> <input type="text" value={name} onChange={(e) => setName(e.target.value)} /><button type="submit">Update</button> { optimistic.map((item) => (<p>{ item.name } { item.isPending ? "Pending" : "Done" }</p>))} </form> ); 管理しているデータ（optimistic）と、その データを更新する関数（setOptimistic）を返 す。 第一引数に初期値を渡し、第二引数に管理して いる値を更新するための関数を渡します。
28. 追加機能⑤
29. React 19 の追加機能⑤ use Promise などのリソースの値を読み取ることができる React API です。 Suspense の配下で使用でき、async/awaitを使用せずに非同期の処理を行 なってくれるような機能になっております。 Suspense … データ取得の完了までの表示を管理してくれるコンポーネント
30. use Promise などのリソースの値を読み取ることができる React API です。 Suspense の配下で使用でき、async/awaitを使用せずに非同期の処理を行 なってくれるような機能になっております。 簡単に説明すると、Suspenseの配下でデータの取得を行う際、useを使うこ とで簡単に非同期の実装を行うことができます。 React 19 の追加機能⑤ Suspense … データ取得の完了までの表示を管理してくれるコンポーネント
31. React 19 の追加機能⑤ import { Suspense } from 'react'; export const UseParent = () => { return ( <Suspense fallback={<div>Loading...</div>}> <Use user={getUser()} /> </Suspense> ) } import { use } from 'react'; type Props = { user: Promise<{name: string}>; } export const Use = ({ user }: Props) => { const value = use(user); return ( <p>{ value.name }</p> ) };
32. React 19 の追加機能⑤ import { Suspense } from 'react'; export const UseParent = () => { return ( <Suspense fallback={<div>Loading...</div>}> <Use user={getUser()} /> </Suspense> ) } import { use } from 'react'; type Props = { user: Promise<{name: string}>; } export const Use = ({ user }: Props) => { const value = use(user); return ( <p>{ value.name }</p> ) }; データ取得を行うコンポーネントの親要素で Suspenseを使用する。
33. React 19 の追加機能⑤ import { Suspense } from 'react'; export const UseParent = () => { return ( <Suspense fallback={<div>Loading...</div>}> <Use user={getUser()} /> </Suspense> ) } import { use } from 'react'; type Props = { user: Promise<{name: string}>; } export const Use = ({ user }: Props) => { const value = use(user); return ( <p>{ value.name }</p> ) }; データ取得を行うコンポーネントの親要素で Suspenseを使用する。 データ取得を行うためのPromiseの値をuse API に渡し、非同期のデータを取得できる。
34. まとめ useTransition 非同期の処理が完了するまでの待機状態（pending）を管理してくれます。 useActionState データを更新を行うためのデータや更新処理、待機状態などを管理してくれます。 useFormStatus <form>タグを使用したフォームの送信の待機状態をバケツリレーせずとも、取得することができます。 useOptimistic 更新を行う際に送信するデータを先にUIに反映し、結果を即座に見れる状態にすることができます。 use Suspenseの配下でデータの取得を行う際、簡単に非同期の実装を行うことができます。