[React.js] "Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop." 해결

[그림 1] Too many re-renders 에러

 

button 태그의 onClick 이벤트에 함수 할당 후 만난 에러이다. 해당 코드는 아래와 같다!

<button
    type="button"
    className="btn"
    onClick={makeHeatmapLngLat(heatmapInfo)}
>

 

makeHeatmapLngLat 함수 내에서 useState에 값을 set 하는 과정에서 무한루프가 발생한 것이다. 이 문제는 onClick에 콜백 함수를 할당하여 해결할 수 있었다. 수정한 코드는 아래와 같다.

<button
    type="button"
    className="btn"
    onClick={() => makeHeatmapLngLat(heatmapInfo)}
>

 

참고 자료: https://anerim.tistory.com/161

[리액트 에러 React Error] Too many re-renders. React limits the number of renders to prevent an infinite loop.