Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React19で状態管理はどう変わるか

ytaisei
August 03, 2024

 React19で状態管理はどう変わるか

若手エンジニアLT & 交流会にて使用したスライドです

https://devguil.connpass.com/event/321787/

ytaisei

August 03, 2024
Tweet

More Decks by ytaisei

Other Decks in Technology

Transcript

  1. 自己紹介 • 株式会社AI Shift ◦ Webフロントエンド ◦ LLMを活用した新規事業 • 社会人1年目

    • 2社でBtoBアプリケーション開発 • Zennで記事をよく書いてる、など
  2. アジェンダ 1. use API 2. useActionState Hook 3. useOptimistic Hook

    4. まとめ 重要:今回はクライアントでの実行にFocusしています。
  3. use API > use はプロミス (Promise) やコンテクストなどのリソースから 値を読み取るための React API

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

    です。 > プロミスを引数にして呼び出した場合、 use API は Suspense や エラーバウンダリ (error boundary) と協調して動作します。 参考:https://ja.react.dev/reference/react/use おっ?
  5. コンテクストから値を読み取る • use APIにコンテキストを渡すと useContextと同じ挙動になる • useContextとの違い ◦ 条件分岐の中で使用できる use

    はより柔軟であるため、 useContext よりも優先的に使用する 参考:https://ja.react.dev/reference/react/use#reading-context-with-use
  6. useActionState Hook 状態の更新に伴う要素 • 更新する状態 ◦ formの拡張(FormData) • 更新中の状態 ◦

    isPending • 更新結果の状態 ◦ Success or Error State これらがReactのHooksで完結する
  7. これまでの楽観的更新 React19以前(TanStack Queryの例) TanStack Queryでの処理 1. 実行中のクエリをキャンセル 2. 更新前のスナップショットを記憶 3.

    キャッシュを直接更新&描画 4. 非同期で更新処理を実行 5. 成功した場合はinvalidateQueriesで データを再取得 6. エラーの場合は表示中の状態を Fallback