React - Can't perform a React state update on an unmounted component 에러

 

 

useEffect를 사용할 경우, 메모리 누수가 발생하였다면서 다음과 같은 에러문구가 콘솔창에 나오는 것을 종종 확인할 수 있다.

 

Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

 

이 경우는 useEffect를 사용했을 때, cleanup function을 반환하지 않았기 때문에 발생하는 오류이다.

 

다음과 같이 cleanup function을 추가하면 에러가 사라지는 것을 확인할 수 있다.

useEffect(() => {
  ...
  
  // cleanup function
  return () => {
  
  }
}, []);