More than 1 year has passed since last update.

React Infinite render loop []!==[]

Last updated at 2022-11-26Posted at 2022-11-25

カスタムフックに渡した引数が原因で無限レンダリングが発生した。

const results = useCustomHooks(
  condition === STRING ? [...ARRAY] : [condition],
);

　
[]!==[]
のためレンダリングごとに別の配列が生成される。
useMemoを使うことで解決。

const results = useCustomHooks(
  React.useMemo(() => (condition === STRING ? [...ARRAY] : [condition]), [
    condition,
  ]),
);