React勉強中に「Too many re-renders. React limits the number of renders to prevent an infinite loop.」というエラーが出た

はじめに

stateの勉強中にエラーが起きた。

問題

num%3 === 0 ? setIsShow(true) : setIsShow(false)

Reactで上のコードを書いたときに以下のようなエラーが出る。

Too many re-renders. React limits the number of renders to prevent an infinite loop.

解決方法

num%3 === 0 ? isShow || setIsShow(true) : isShow && setIsShow(false)

無限にレンダリングが起きないように、trueのときはtrueにsetしない。falseのときはfalseにsetしない。

おわりに

前よりレンダリングを意識できるようになった。