[ React.js ] 에러해결 / Too many re-renders. React limits the number of renders to prevent an infinite loop.

안녕하세요 상훈입니다.

React.js 에서 onclick 이벤트로 state 값을 boolean 형태로 true/false 만들려고 하는데 아래의 무한 루프 에러가 발생하였다.

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

 

😎 결론부터

<button type="button" onClick={} >
  {state ? '숨기기' : '관련영상'}
</button>

//변경전
onClick = { !state }

//변경후
onClick = { () => { !state }}

이렇게 처리하여 에러가 발생하지 않았다.
그냥 콜백함수로 처리했어야했다.

---

😶 처리하고나서 곰곰히 생각해보았는데..

운동할때랑 자기 전, 그리고 출근할 때 문득 위 에러가 생각났는데,

Callback Function을 위 onClick 내에 넣어줘야 무한루프 에러가 발생하지 않는다는 것을 깨달았다.

만약 콜백 함수가 아니라, 그냥 함수를 바로 써준다면, 위 !state 기능이 렌더링 되자마자 동작해버리고 또 동작하여 무한루프가 발생하는게 아닌가 싶었다.

공식문서에서도 자바스크립(Javascript)의 onClick 과는 다르다! 라고 써있었는데 간과한 것 같았다.

그리고 테스트를 실시해보았다.

---

1) onClick 내부에 바로 썼을 경우

<button type="button" onClick={setUpdateitem(!updateitem)}>clickevent</button>

역시나 인피니트 루프 에러가 바로 출력되었다.

 

2) 함수로 따로 빼서 사용

const updateItemWithClickEvent = () => {
    setUpdateitem(!updateitem)
    alert(updateitem)
  }

<button type="button" onClick={updateItemWithClickEvent}>clickevent</button>

 

3) 함수를 따로 빼기 + 호출

<button type="button" onClick={updateItemWithClickEvent()}>clickevent</button>

-> 무한루프 발생

 

4) 콜백함수 return 으로 선언

<button type="button" onClick={() => updateItemWithClickEvent}>clickevent</button> 
// 동작하지않음

<button type="button" onClick={() => updateItemWithClickEvent()}>clickevent</button> 
// 정상동작

 

당연한 얘기지만, [함수] 로 사용해야 정상적으로 동작한다. 

---

2) 상수에 함수를 할당해놓았기 때문에 정상동작함
4) CallbackFunction으로 함수를 호출해야 정상동작함

 

---

참고

이벤트 처리하기 – React

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

공식문서에서 캡쳐해옴