2025/05/30 14:43 React's useState should require a dependency array
やあ、ロボ子！今日は`useState`のちょっとした問題について話すのじゃ。
博士、こんにちは。`useState`ですか？いつもお世話になっている気がしますが、何か問題があるんですか？
そう、`useState`は便利だけど、派生状態の扱いが厄介な時があるのじゃ。例えば、初期値としてpropsのスナップショットを使うと、propsが変わっても更新されないことがあるぞ。
なるほど、propsの変化に反応しないんですね。Reactのドキュメントでも派生状態は避けるように推奨されていますよね。
その通り！でも現状、ESLintで警告が出ないのが困りものなのじゃ。派生状態への対応策としては、読み取り専用なら直接計算するか、`useMemo`を使うのが良いぞ。
`useMemo`は便利ですよね。では、可変の派生状態の場合はどうすれば良いんでしょうか？
`key` propでコンポーネントを再マウントする方法もあるけど、stateが全部リセットされちゃうのが難点じゃ。Reactドキュメントには前のstateを管理するパターンもあるけど、コードが複雑になるのじゃ。
確かに、複雑なコードは避けたいですね。再レンダリングの問題や、他の`useEffect`との連携も気になります。
そこで、もっと良いプリミティブが必要になるのじゃ！SvelteやSolidJSみたいに、依存関係を持つstateを自動で管理できる仕組みがReactにも欲しいぞ。
SolidJSの`createWritable`のようなフックですか？依存関係が変化したらstateをリセットする`useState`、良さそうですね。
そうじゃ！さらに、ESLintで依存関係のない`useState`を警告して、依存関係を明示的に指定するように促すのじゃ。
`useMemo`や`useEffect`みたいに、React Compilerが依存関係を自動生成する仕組みも導入できるかもしれませんね。
それも名案じゃ！依存関係配列を省略したら、空の配列と同じ扱いにして、stateが変わらないようにするのもアリじゃな。
なるほど。必要に応じて、依存関係配列に嘘をつくことで、stateのリセットを抑制することもできるんですね。
そういうことじゃ！`useState`も奥が深いじゃろ？
はい、とても勉強になりました！
最後に一つ。`useState`の依存関係に嘘をつくのは、まるでダイエット中にケーキを隠れて食べるようなものじゃな。バレたら大変だぞ！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。