[React Err] Can't perform a React state update on an unmounted component.. 해결하기

Warning: 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.

 

 

프로젝트 진행 중, 처음 로그인하는 SignInScreen에서 이와 같은 경고가 발생했다.

무시해도 앱은 잘 구동되지만, 이런 건 바로바로 해결해줘야 속이 시원하다 🤧

 

에러 메시지를 해석해보면 언마운트 된 상태에서 리액트의 state를 업데이트하려고 하여 발생한 경고인 것을 확인이 가능하고,

밑에 줄에서 이것을 고치기 위해선 useEffect의 cleanup 함수를 이용하라고 한다.

 

// 기존 코드
         
...
     
finally {
    setLoading(false);
}

// cleanup function을 적용한 코드

...

finally {
    return () => setLoading(false);
}

 

try catch 가 모두 끝난 후 마지막에 공통적으로 Loading을 false 상태로 바꿔주는 코드를 작성했는데,

이미 로그인 처리가 완료되어 (페이지 이동이 된, 언마운트 된 상태) setLoading의 state를 false로 바꾸려고 했던 것이었다.

즉, 해당 페이지에서 이미 다른 페이지로 넘어갔음에도 state의 상태 값을 바꾸려 하여 발생한 경고이다.

 

이런 경우, 하단의 return () => setLoading(false); 와 같은 cleanup function을 이용하여

이제 상태가 종료되어 더 이상 변경하지 않아도 됨을 알려줄 수 있다.