useIsMountedRef
Component의 mount 여부를 알 수 있는 hook 입니다.
useIsMountedRef
를 이용하여 컴포넌트가 현재 마운트되어 있는지 아닌지를 알 수 있습니다. 주로 비동기 작업 또는 타이머와 같이 컴포넌트가 마운트되지 않은 상태에서 발생하는 부작용을 방지하는 데 유용합니다.
Motivation(reference)
- 컴포넌트가 언마운트된 상태에서 상태(State)를 설정하여 메모리 누수를 방지합니다.
- 컴포넌트가 이미 마운트되었는지를 확인하고 제어합니다.
- 언마운트된 컴포넌트에 상태(State)를 설정할 때 흔히 발생하는 오류를 방지합니다.
Example
const ref = useIsMountedRef();
useEffect(() => {
if (!ref.isMounted) {
return;
}
if (clientBenefitIntelliQuery.data === undefined) {
return;
}
setBenefitIntelliContents(clientBenefitIntelliQuery.data);
}, [clientBenefitIntelliQuery.data, ref.isMounted]);