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