[react] Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

(예시코드)

 

const [text,setText] = useState("");

.

.

.

setText(someThing);

을 하니

 

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

와같은 에러가 나타남.

 

구글링을 해보니 useEffect안에 dependency와 함께 써보라는 글을 발견.

https://wnsdufdl.tistory.com/245

오늘의 에러 : Too many re-renders. React limits the number of renders to prevent an infinite loop. ( +13,+137

 

블로그 글의 해법은,

useState() 는 비동기로 상태값을 변경하기 때문에 렌더링 시점에서 상태가 개발자의 의도대로 업데이트 되지 않은 상태일 수도 있다는것이었음. 따라서 useEffect를 이용해 특정 값이 바뀔때마다 무적권 해당 콜백함수가 실행되도록 하게 함.

 

그랬더니

 

Maximum update depth exceeded. 

This can happen when a component calls setState inside useEffect, 

but useEffect either doesn't have a dependency array, 

or one of the dependencies changes on every render.

제목과 같은 오류가 남. 

그리고 겁나 무서운 거

에러 메세지와 동시에 계에에에에엥에속 렌더링이 되고있어서 같은 에러메세지가 거의 0.1초 단위로 뜨고잇엇음 ㅋㅋ

 

암튼 이 에러를 해결하기 위해 또다시 구글링. 이거야 말로 구글링을 위한 구글링

 

그러다 요 블로그를 발견했다.

https://sambalim.tistory.com/152?category=923123 

useEffect 이해하기

 

읽고 조금이나마 useEffect에 대한 개념을 바로 잡은 느낌. 아직 글이 완전히 이해되진 않았지만 계속 읽어보면 좋을것같다. 

 

아무튼 이곳에서 제시한 해법은,

useEffect 안으로 해당 무한 렌더링 되는 함수를 아예 집어 넣을것 , 또 다른 두번째 방법은 useCallback 함수를 이용해서 특정 값이 변화하지 않을때는 이전 값을 재활용해서 쓰도록해서 계속되는 렌더를 막을것.

 

나는 간단히,

원인이 되는 값을 useCalllback함수 두번째 인자로 두어서 문제를 해결했다.

 

맨 처음 예시코드를 이어서 써보자면

 

useCallback(()=>{

   setText(someThing);

},[someThing]);

 

요런 식으로다가. 매우 간단.