Reactの状態はどこに置くべきか

前回は、Redux・Zustand・Jotaiの違いについて比較しました。

どれも使い方は異なりますが、複数コンポーネント間で状態（state）を共有するためのライブラリであることは同じです。

今回は、そもそもどのような場合にグローバルで状態管理する必要があるのかを考えてみます。

AI時代でも状態管理の理解は必要

最近は、フロントエンドの実装をAIに任せる場面が増えています。

ただし、状態管理の理解がないままAIに任せると、必要以上にReduxやZustandへStateを置いてしまうことがあります。

例えば、

モーダルの開閉
フォームの入力値
APIの取得結果
検索条件
選択中のデータ

これらをすべてグローバルStateで管理する必要はありません。

重要なのは、

そのStateをどこで管理するのが適切か判断すること

です。

Stateの置き場所を考える

目安としては、次のように分けられます。

コンポーネント内だけで使う
→ useState

近いコンポーネント同士で共有する
→ 共通の親コンポーネントにStateを引き上げる

複数コンポーネントで共有する
→ Redux / Zustand / Jotai

APIから取得するデータ
→ TanStack Query

URLに残したい状態
→ searchParams

フォームの状態
→ 小規模なら useState
→ フォームが大きい場合や複雑な場合は React Hook Form

例えば、顧客検索画面なら、

検索キーワード
→ URL

検索結果
→ TanStack Query

選択中の顧客
→ Redux / Zustand / Jotai

モーダルの開閉
→ useState

のように分けることができます。

まとめ

状態が必要になったときに、

Stateが必要
↓
Reduxに入れる

ではなく、

Stateが必要
↓
どんなStateなのか考える
↓
適切な場所に置く

と考えることが重要です。

AIにコードを書いてもらう場合でも、Stateの責務と置き場所を判断するのは開発者側です。