useMemo(() => 重い計算()) と書いて依存配列を省略した。どうなる？

解説

正解は「毎回のレンダリングで再計算される」です。useMemo は第2引数の依存配列（何が変わったら再計算するかを指定する配列）を省略すると、キャッシュの判定基準を失い、レンダーのたびに計算関数を実行します。依存配列の有無で挙動がどう変わるか// 省略: 毎レンダー再計算される（メモ化されない） const a = useMemo(() => heavy(items)); // []: 初回だけ計算し、以降は同じ結果を返す const b = useMemo(() => heavy(items), []); // [items]: items が変わったときだけ再計算する const c = useMemo(() => heavy(items), [items]);省略した場合、React は前回と比較する材料が無いため、常に「変わったかもしれない」と判断します。結果として useMemo で包む前と同じ計算量に戻り、比較処理のぶんだけわずかに遅くなります。他の選択肢が誤りの理由初回だけ計算されキャッシュされる: これは依存配列に [] を明示した場合の挙動です。省略とは別物です。コンパイルエラーになる: 第2引数は省略可能なため、構文としては有効です。undefinedが返る: 計算関数は実行されるので、その戻り値が返ります。エラーが出ないぶん気づきにくい依存配列の省略は動作としては正しく、警告も出ません。そのため「メモ化したつもりで効いていない」状態が放置されがちです。eslint-plugin-react-hooks の exhaustive-deps ルールを有効にしておくと、依存配列の不足を検出できます。useMemo – React