컴포넌트가 마운트되어 있는지 여부를

RefObject<boolean>

으로 추적하는 훅입니다. ref를 사용하므로 값이 변경되어도 리렌더링을 유발하지 않습니다. 비동기 작업 완료 후 컴포넌트가 언마운트된 경우 상태 업데이트를 건너뛸 때 유용합니다.

구현

import { type RefObject, useEffect, useRef } from 'react';

export function useIsMountedRef(): RefObject<boolean> {
  const isMountedRef = useRef(false);

  useEffect(() => {
    isMountedRef.current = true;
    return () => {
      isMountedRef.current = false;
    };
  }, []);

  return isMountedRef;
}

사용법

1. 비동기 작업 후 마운트 여부 확인

function Component() {
  const isMountedRef = useIsMountedRef();
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(result => {
      if (!isMountedRef.current) return; // 언마운트 후 상태 업데이트 방지
      setData(result);
    });
  }, []);

  return <div>{data}</div>;
}