保守性の高いReact hooksコードの指針

前提 本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。（思い出し次第随時追加していきます） ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは１ページに１つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは１ページに１つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat

[kako-jun]

2つ目の良例のload()が、なぜisLoadingに依存するのか分からない……。空配列で良いような気がするけど……

[umai_bow]

Depsの依存関係を正しく書かないのはどうだろ……。経験上、Depsが正しく書かれてて問題あることがないので、Hooksの使い方の理解が間違ってるんじゃないかと言う気がする

[Rishatang]

関数やオブジェクトを適切にMemoizeしないと無限ループがちょくちょく発生するっていうのは経験ある

[hylom]

「Webアプリの多くのケースでuseEffectは必要ではない」マジですか（propsに応じて非同期処理を実行するようなコンポーネントって一般的ではないのか）

[hdampty7]

「stateはプリミティブにする」というのは言いたいことは分かるけど、個々にstateに入れると逆に管理が大変なのでは。そもそも出してもよいなら最初から不要なstateは極力持つなって話だし。

[carolina04]

解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる