Reactの状態管理:いつ、何を使うべきか

Reactプロジェクトを始めたばかりの頃は、コードはクリーンに感じられます。しかし、やがて「prop drilling」に直面します。たった一つのボタンにデータを届けるために、5層ものコンポーネントを経由してデータを渡すことになるのです。

どのツールを使うべきか迷うことでしょう。Context?Redux?Zustand?選択肢が多すぎると、混乱を招きます。

useState は「ポケット」です。 小さなものに使用します。

  • ローカルデータの管理に最適。
  • 例:ドロップダウン。
  • ルール:ローカルに留めること。

Context は「家族の冷蔵庫」です。 みんなで共有します。

  • グローバルデータの管理に最適。
  • 更新頻度が低いデータに最適。
  • 例:ユーザーログイン情報。
  • ルール:グローバルな項目に使用すること。

Zustand は「倉庫」です。 大量のデータを扱います。

  • 複雑なデータの管理に最適。
  • 更新頻度が高いデータに最適。
  • 例:ショッピングカート。
  • ルール:大規模なアプリに使用すること。

まずは useState から始めましょう。 Prop drillingが苦痛になったら Context へ移行します。 複雑なデータやラグが発生する場合は Zustand を使いましょう。

シンプルに保ちましょう。

出典: https://dev.to/zeeshan_farooq_4ead3782d8/react-state-management-when-to-use-what-a-simple-guide-1cf1