Can't perform a React state update on an unmounted component.

발생 이유 : router 이동 한 후 이전 컴포넌트에서 state 값을 바꾸려고 할 때 발생하게 됩니다.

기본적으로 useState는 비동기적으로 동작하기 때문입니다.

 

const moved = () => {
        if(window.scrollY > 50)
            setShow(true);
        else
            setShow(false);
    }
useEffect(()=> {
        window.addEventListener("scroll", moved)
 }, [])

이 기능은 Navbar가 스크롤 이동을 감지해서 Navbar에 다른 css 값을 적용하는 동작을 하고 있는데 이 함수가 동작하는 도중 Rotuer로 이동해서 발생하게 됐습니다.

 

해결 방법이 두 가지정도가 있다는 것을 확인하였고 아래와 같습니다

1. 라우터 이동하기 전에 오류를 발생시키는 함수에서 state 변경을 완료하고 이동한다
2. 에러 메시지에 있는 조언대로 useEffect cleanup function을 사용한다.

useEffect cleanup function이 뭔가 했더니 useEffect를 썼을 때 종료할 때 실행되며 " 상태의 종료를 반환함수에 정의 "하는 것이었습니다

 

cleanup 함수는 컴포넌트가 화면에서 사라질 때(unmount) 수행된다고 이해할 수 있고 cleanup 함수는 컴포넌트 제거 전 setInterval, setTimeout 등의 작업들을 clear해야 할 때, 라이브러리 인스턴스를 제거해야 할 때 유용하게 사용된다고 합니다

 

 

- 참고했던 자료

https://kyounghwan01.github.io/blog/React/cant-perform-a-React-state-update-on-an-unmounted-component/#해결

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

https://lts0606.tistory.com/487

리엑트 후크(React Hook) useEffect cleanup function

https://velog.io/@still3028

still3028 (BANSEOK SUH) - velog