【意外とハマる??】Reactで、無限ループに気をつけましょう

例えば、こんなコンポーネント。

App.js

const App = () => {
  const [count, setCount] = useState(0)
  return (
    <>
      <button onClick={setCount(count + 1)}>+1</button>
      {count}
    </>
  )
}

export default App

チュートリアルなどでよくある、数字を足していくやつですね。

実は、これ無限ループが起きてしまっているんです。

実際にこれを動かしてみると、
Too many re-renders. React limits the number of renders to prevent an infinite loop.(直訳: 再レンダリングが多すぎます。 Reactは、無限ループを防ぐためにレンダリングの数を制限します。)と怒られます。

原因は、onClick内のこの書き方です。

onClick={setCount(count + 1)}

この書き方の場合、onClickでsetCountは呼ばれず、コンポーネントがrenderされたタイミングでsetCountが呼ばれます。

例えば、

onClick={console.log("hello")}

とやると、renderされたタイミングでhelloと表示されるのが確認できると思います。

このようなことから、

setStateされたタイミングでrenderされるreactコンポーネントの性質上、
render => setState => render => setState => render ....
と無限ループが起きてしまうのです。

これを防ぐためにいくつか方法がありますが、
僕はアロー関数をよく使います。

onClick={() => setCount(count + 1)}

以上です。