React hooksのユースケースまとめ

プロダクションでのReact Appの立ち上げ・運用をやっとこ1サイクル回すことができたので、忘れないうちにいくつか知見を書き溜めておこうと思います。
しかし本当に変化が目まぐるしいですね。過去の薄まってしまった記憶を取り戻すためにチュートリアルを一回しして、さーてやっていき〜と思ったところで「クラス型はもうオワコン!これからはhooks!」と言われたときにはどうしようかと思いました(早めに気づけてよかったともいう)。

さて今回はそんなhooksについて。
ベーシックな解説は公式ドキュメントや各種記事に譲るとして、ユースケースに絞ったメモを残しておきます。

useState

ご存知stateですね。値のストアとsetterを提供してくれる、シンプルなhookです。
まあこれはそのまんまなんですが…、主にパラメータの受け渡し時に活躍してくれました。
コンポーネントに値を渡しつつ、onClick / onChangeハンドラでsetXXXして再描画させる、とか。そんな感じです。
モーダルの開閉にも役立ってくれますが、管理するステート量に比例して変数が増えていくのが(見通しの観点で)若干ネック。使い所が違う場合はreducerでまとめるわけにもいかず…。

useReducer

「よくわからん」「useStateとの違いがわからん」などと敬遠されがちなuseReducer。
本来使うべきでない用途で使うと可読性が著しく下がりますね。慣れるまでは「迷ったらstate」でいいと思います。
Formikなどに頼るまでもない、シンプルなフォームオブジェクトを扱う手段*1として使われることが多いかと思いますが、この子が特に輝くのは、前の値を参照してsetしたい場合かなーと。
後述のuseEffectの第2引数として渡す値を事前にクリーニングする、などの用途に役立ってくれました。

useEffect

非同期処理の担い手。正しくは、画面の描画後に1回発火する君。
第2引数に配列を渡した場合は、その中身が変化したタイミングでも再実行されます。
さらに、アンマウント時のクリーンアップ処理を書くこともできる。強力ですね。
バックエンドからデータをフェッチする処理なんかを書いていくと思うんですが、Autopagerのような「値が変わる処理が複数回走りうるユースケース」においてはこちらのような現象を引き起こしがちなので、useStateではなくuseReducerで払い出した変数を第2引数に噛ませておくと暴発せずに済みます。

その他、あるいはReduxについて

useContextとかuseRefとかは、何回か使いかけて結局やめました。
コンポーネントへの伝搬は、多少面倒でも {...props} でドカっと引き渡せちゃう(便利)(濫用注意)こともあって、少なくとも今の規模ではあんまり困っていません。
書き始めでは想定していなかった要件に対応するなどして、分岐や似たような振る舞いをするコンポーネントが増えた場合などに(リファクタの手として)有効な気がしています。こちらについてもまたいずれ、例とともにまとめます。
またReduxの導入ですが、今回は見送ってしまいました。チームにReactチョットワカル人材が(nヶ月前の自分を含め)あまりいない中で、Fluxアーキテクチャまで学習するコストが高くなりすぎることを懸念したためです。塩梅が難しいですね。

*1:objectを定義して引き回す