[React] 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.

❌ 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.

❌ 언마운트 된 컴포넌트에서는 상태를 추적할 수 없고, 상태를 추적하지 않기에 작업이 수행되지는 않지만,
메모리 누수가 발생할 수 있으니, useEffect의 cleanup 함수를 이용해라

 

react로 작업을 하다보면 종종 만나는 에러 중 하나입니다.
이 에러는 fetch 등 비동기를 실행하는 실행 context가 완료 되기 전에 컴포넌트가 unmount가 된 후 setState가 실행이 될 때 발생하게 됩니다. 이럴 때 해결 방법은?!

 

📌 mount, unmount를 해주는 방법입니다.

변수로 mount를 false로 선언해주고 비동기 컨텍스트를 실행하기 전에 true값으로 변경 끝에 다시 false로 변경해주면 해결됩니다. 저는 useState로 관리해줬습니다.

 

const [mount, setMount] = useState(false)

useEffect(() => { ...
try{
  setMount(true)
}catch(err){
}

setMount(false)

//or Cleanup함수식으로 처리해도 됩니다!

},[]}