경고 : setTimeout으로 인한 메모리누수 => 페이지 unmount될때 setTimeout 꺼주기

아래의 NextBtn 함수가 5초마다 실행되는데, 페이지를 옮긴후에도 setTimeout이 실행되어 메모리 누수가 발생한다는 내용이다.

그럼 페이지를 옮겼을때 setTimeout을 꺼주면 된다.

나의 경우에서는 다음과 같이했다.

 

 return () => {
      mounted = false;
    };
    
이 부분은 오늘 처음보는 형식인데, unmount될 때 실행되는 함수인것같다.

=> 아닌걸로 판명, 공식문서에 따르면 모든리렌더링시마다 실행된다.(의존성배열넣으면 의존성배열이 변할때마다)
https://ko.reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update

 

 

 

참고자료 : 

 

https://norwayy.tistory.com/370?category=978603 

이슈 해결 - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in

위의 글보다 위의 글에서 소개하는 다음글이 영어지만 코드가 일반적인 상황에서 적용할 수 있게 적혀있어 도움이 되었다.

 

https://www.benmvp.com/blog/handling-async-react-component-effects-after-unmount/

Handling async React component effects after unmount | Ben Ilegbodu