使い分け

どちらを使うか

useReducer を覚えると、何でも reducer にしたくなります。ですが検索欄の文字まで reducer にすると、書く量が増えるだけで読みやすくはなりません。使い分けの目安を持っておきます。

useState のままでよいもの

次のどれかに当てはまるなら useState です。

• 値が1つで、更新が「新しい値に置き換える」だけ
• 更新する場所が1か所しかない
• 前の値を見なくても次の値が決まる

fleama で言えば、検索欄の文字、ダークモードの入り切り、モーダルの開閉です。setKeyword(e.target.value) の1行で終わる話に、action の型を足す理由はありません。

useReducer に寄せるもの

次のどれかに当てはまったら reducer を考えます。

• 1つの操作で、複数の値が一緒に変わる
• 次の値が、前の値の中身に依っている
• 同じ状態を、いくつもの場所から違うやり方で更新する
• 更新の決まりごとに、条件分岐が混じっている

カートがまさにこれです。「入れる」は、既に入っていれば数量を増やし、無ければ行を足す。前の中身を見ないと次が決まりません。更新の規則が育っていく状態は reducer 向きと覚えてください。

判断の一言

useState と useReducer のどちらが正しいか、という問いにはあまり意味がありません。どちらでも動きます。効くのは次の一言です。

この状態の更新の決まりごとを、他の人に説明する必要があるか。

説明が要るなら、それは reducer に書き出せる決まりごとです。説明が要らないなら useState のままで十分です。

混ぜてよい

1つの部品の中で両方を使って構いません。カートは reducer、検索欄は useState、という形が普通です。全部を1つの巨大な reducer にまとめると、関係の無い値まで同じ action で触ることになり、かえって読みにくくなります。

演習

カートだけを reducer に移し、検索欄は useState のまま残します。