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 정리 기능에서 모든 구독 및 비동기 작업을 취소합니다.
해결방법
데이터 가져오기 또는 기타 비동기 작업은 Promise를 반환한다.
이행된 Promise가 마운트 해제된 구성 요소에 대한 상태 업데이트를 트리거하는 경우 경고(또는 더 심각한)가 발생합니다. 이를 방지하기 위해 상태 업데이트에 조건을 추가해야한다.
useEffect(() => {
let isMounted = true;
new Promise((resolve, reject) => {
setTimeout(() => {
resolve("Time is up!");
}, 2000);
}).then((value) => {
if(isMounted) {
setMessage(value);
}
});
// Clean-up:
return () => {
isMounted = false;
}
}, []);
구성 요소가 마운트 해제되자마자 useEffect 내부의 정리 기능은 이 조건이 false로 평가되도록 합니다.
이제 Promise가 해결되면 마운트 해제된 구성 요소에 대한 상태 업데이트가 발생하지 않습니다.
참고 블로그
728x90
