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

GY·2022년 1월 15일
1

error report

목록 보기
14/22

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

자꾸 이런 오류가 떴다.

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

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.

0개의 댓글