React State Management: When to Use What

新しいReactプロジェクトを立ち上げます。最初はクリーンな状態です。しかし、5つのレイヤーを越えてデータを渡すことになります。これが「prop-drilling」です。行き詰まりを感じるでしょう。

適切なツールを選びましょう。

useState: Your Pocket ローカルデータに使用します。小さなものはここに。

  • ドロップダウンの状態
  • 入力フィールド ローカルに留めておきましょう。

Context API: The Family Fridge 誰もが許可なくデータを取り出せます。 グローバルデータに使用します。

  • ユーザーのログイン状態
  • テーマ設定
  • 言語設定 変更頻度の低いデータに使用してください。

Zustand: The Storage Unit このツールは整理されています。大量のデータに使用します。

  • ショッピングカート
  • 複雑なダッシュボード アプリが煩雑に感じられる時に使いましょう。

The Plan:

  • まずは useState から始めます。
  • prop-drilling が問題になったら Context へ移行します。
  • パフォーマンスが低下したら Zustand に切り替えます。

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

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