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

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

Error Code

const [visible, setVisible] = useState(false);

<Button onClick={setVisible(true)}>Show</Button>

Solution

렌더 과정에서 onClick 내에 state를 변화하는 함수가 있다면 반복해서 리렌더링 하게 된다.
setState는 콜백으로 다시 렌더링을 트리거하기 때문에 무한루프에 빠지게 되어 오류가 발생하게 된다.

화살표 함수(() => {}) 로 래핑하여 클릭 시만 이벤트가 발생하도록 변경해준다.

<Button onClick={() => {setVisible(true)}}>Show</Button>