Hooks を使ってコードを書いていると、useState()の宣言が多くなってしまってごちゃごちゃしてしまうことがある。
このような問題に直面した時にどのように書いていくのが良いのだろうか。
単純に書いた場合、Class Component に慣れている方は、stateをまとめて宣言した方が見栄えが良いと思われるかもしれない。
これについてReactのドキュメントのFAQを読むと、次のように書いてある。
すべての state を 1 つの useState 呼び出しに含めても動作しますし、フィールドごとに別に useState を持たせることでも動作はします。しかしこれらの両極端の間でうまくバランスを取り、少数の独立した state 変数に関連する state をグループ化することで、コンポーネントは最も読みやすくなります。state のロジックが複雑になった場合は、それをリデューサで管理するか、カスタムフックを書くことをお勧めします。
つまり、基本的に少数の独立した state に分割して宣言することで、Custom Hook を作りやすくなり、リファクタリングしやすくなったり、コードが見やすくなるのである。
また、「どうにも上手くグループ分けができず、汚くなってしまった。」という時に限ってuseReducer()を使って、処理をまとめるのが良いと考える。
それ以外にもuseReducer()の利用場面として、以下のような場面がある。
- 複数階層にまたがって更新を発生させるようなコンポーネントではパフォーマンスの最適化になる(https://ja.reactjs.org/docs/hooks-faq.html#how-to-avoid-passing-callbacks-down)
- 前回のstateに基づいて、stateを更新したいような場面(https://overreacted.io/ja/a-complete-guide-to-useeffect)
そのため、次のようなステップでコードを書いていくのが良いと思われる。
-
const x = useState(0);のように独立させて宣言してみる -
const [position, setPosition] = useState({ x: 0, y: 0});のようにして役割ごとにまとめてみる - それでも上手くいかない場合は、
useReducer()を使うというようにしたほうが共通化しやすいと考える。
メモ程度にまとめてみました！
間違っている所や他に意識しているようなことがあれば教えていただけたら嬉しいです。