Tweet
Tweet

Slide 1

Slide 1 text

React19で状態管理はどう変わるか 株式会社AI Shift 安井大晟（ytaisei_）

Slide 2

Slide 2 text

自己紹介 ● 株式会社AI Shift ○ Webフロントエンド ○ LLMを活用した新規事業 ● 社会人1年目 ● 2社でBtoBアプリケーション開発 ● Zennで記事をよく書いてる、など

Slide 3

Slide 3 text

アジェンダ 1. use API 2. useActionState Hook 3. useOptimistic Hook 4. まとめ

Slide 4

Slide 4 text

アジェンダ 1. use API 2. useActionState Hook 3. useOptimistic Hook 4. まとめ 重要：今回はクライアントでの実行にFocusしています。

Slide 5

Slide 5 text

use API > use はプロミス (Promise) やコンテクストなどのリソースから 値を読み取るための React API です。 > プロミスを引数にして呼び出した場合、 use API は Suspense や エラーバウンダリ (error boundary) と協調して動作します。 参考：https://ja.react.dev/reference/react/use

Slide 6

Slide 6 text

use API > use はプロミス (Promise) やコンテクストなどのリソースから 値を読み取るための React API です。 > プロミスを引数にして呼び出した場合、 use API は Suspense や エラーバウンダリ (error boundary) と協調して動作します。 参考：https://ja.react.dev/reference/react/use おっ？

Slide 7

Slide 7 text

ReactのAPIでSuspense for Data Fetchingが可能？？？ （今までは） TanStack QueryやSWRなどのライブラリを 使用しないと実現できなかった （期待） Reactの標準APIで Suspense for Data Fetchingを実装したい...

Slide 8

Slide 8 text

ReactのAPIでSuspense for Data Fetchingが可能？？？ （今までは） TanStack QueryやSWRなどのライブラリを 使用しないと実現できなかった （期待） Reactの標準APIで Suspense for Data Fetchingを実装したい... 非推奨 😢

Slide 9

Slide 9 text

Promiseのキャッシュが必要 何も工夫をしないとレンダリングのたびに Promiseが再生成されてしまう 不必要に非同期処理が走る 自前でキャッシュを用意する...？

Slide 10

Slide 10 text

非同期の状態管理ライブラリは Promiseのキャッシュと その制御という観点で未だ重要な役割を持つ

Slide 11

Slide 11 text

コンテクストから値を読み取る ● use APIにコンテキストを渡すと useContextと同じ挙動になる ● useContextとの違い ○ 条件分岐の中で使用できる

Slide 12

Slide 12 text

コンテクストから値を読み取る ● use APIにコンテキストを渡すと useContextと同じ挙動になる ● useContextとの違い ○ 条件分岐の中で使用できる use はより柔軟であるため、 useContext よりも優先的に使用する 参考：https://ja.react.dev/reference/react/use#reading-context-with-use

Slide 13

Slide 13 text

useActionState Hook 状態の更新に伴う要素 ● 更新する状態 ● 更新中の状態 ● 更新結果の状態 Stateで実装するのはしんどい... → Formライブラリを採用する動機になる （React19以前のコード）

Slide 14

Slide 14 text

useActionState Hook 状態の更新に伴う要素 ● 更新する状態 ○ formの拡張（FormData） ● 更新中の状態 ○ isPending ● 更新結果の状態 ○ Success or Error State これらがReactのHooksで完結する

Slide 15

Slide 15 text

useActionStateとformの拡張によって、 状態の更新を効率的に管理できるようになった。 ● バンドルサイズの軽減 ● 学習コストの低下 ● ライブラリのメンテナンス これらの観点からも Reactで状態の更新が完結するのはメリットがある。

Slide 16

Slide 16 text

useOptimistic Hook 個人的に最も期待している Hookです

Slide 17

Slide 17 text

useOptimistic Hook 楽観的更新とは？ 非同期リクエストの進行中、最終的に得るはずの状 態を先に楽観的に表示しておくというもの

Slide 18

Slide 18 text

これまでの楽観的更新 React19以前（TanStack Queryの例） TanStack Queryでの処理 1. 実行中のクエリをキャンセル 2. 更新前のスナップショットを記憶 3. キャッシュを直接更新＆描画 4. 非同期で更新処理を実行 5. 成功した場合はinvalidateQueriesで データを再取得 6. エラーの場合は表示中の状態を Fallback

Slide 19

Slide 19 text

これまでの楽観的更新 やりたいことの割に処理が複雑 ... ● ライブラリ固有の知識が必要 ○ キャッシュの扱い ○ Callback関数の実行順序 etc. ● ライブラリによって若干実装が変わる useOptimisticが解決

Slide 20

Slide 20 text

useOptimisticによる楽観的更新 useOptimisticでの処理 1. useOptimisticに初期値を渡す 2. useOptimisticから返される dispatch関数を更新処理の前に実行 a. stateが更新＆描画 3. 非同期処理が成功・失敗に合わせて処 理を追加

Slide 21

Slide 21 text

ライブラリ固有の学習無しに楽観的更新を実装可能になった

Slide 22

Slide 22 text

まとめ ● useはコンテキストからのリソース取得が柔軟 ● useActionStateとuseOptimisticによって 今までライブラリに頼っていた実装が React固有のAPI・Hooksによって実現できる ○ まずはReactの機能で実装を試みて、 足りない要素を補うようにより薄くライブラリを使っていく意識