[Error][React] react-dom.development.js:14815 Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

버튼을 클릭하면 모달창이 표시되는 기능을 만들고 있었는데,

자꾸 이런 오류가 떴다.

stackoverflow 에서 찾아보았다.

<button className="previous-round" onClick={setOrderData_(previous(orderData_))}>&#8249;</button>
  

중괄호 사이에 있는 내용은 즉시 평가 되기 때문에 setState함수가 매 렌더링 때마다 실행되고, setState는 리렌더링을 불러와 무한 루프에 빠지게 되는 것 같다.

<button className="previous-round" onClick={() => setOrderData_(previous(orderData_))}
>&#8249;</button>

화살표함수로 감싸게 되면 버튼이 클릭될 시에 호출된다.

Too many render - infinite re-render loop

특히 setState함수가 무한 루프에 빠지게 하는 주요 원인일 때가 많은데, 이벤트 콜백안에 있는 함수가 리렌더링을 불러올 때 무한 루프로인한 Too many re-renders 에러를 일으킨다.

내 코드 살펴보기

<button onClick={selectLocation('전체')}> 전체 </button>
 

setState을 직접 호출해주어 이 에러가 발생한 것 같아서, 화살표함수로 감싸준 뒤 호출해보았다.

<button onClick={() => selectLocation('전체')}> 전체 </button>
 

에러가 사라졌다!

Reference

• https://stackoverflow.com/questions/59304283/error-too-many-re-renders-react-limits-the-number-of-renders-to-prevent-an-in