[React] memory leak error (useEffect cleanup function)__Can't perform a React state update on an unmounted component.

📌 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훅 안에서 클린업 함수를 반환하여, 컴포넌트가 언마운트되기 전에 필요한 정리 작업!

→ dataFetching 이후 상태 업데이트를 하기 전에 컴포넌트가 여전히 마운트된 상태인지를 확인하는 방법으로 문제 해결

 

 

이전 코드

const MSearch = () => {
  const { searchText } = useParams();
  const axiosAuth = useAxiosAuth();
  const [data, setData] = useState([]);
  const [results, setResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (searchText !== '') {
      const searchRule = async () => {
        setIsLoading(true);
        const response = await axiosAuth({
          method: 'POST',
          url: '/api/~~~',
          data: { searchText },
        });
        setData(response.data);
        setResults(response.data);
        setIsLoading(false);
      };
      searchRule();
    }
  }, [searchText]);

  return ( ... )
}

 

 

 

변경 된 코드

const MSearch = () => {
  const { searchText } = useParams();
  const axiosAuth = useAxiosAuth();
  const [data, setData] = useState([]);
  const [results, setResults] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // 마운트 상태를 추적하는 변수
    let isMounted = true;

    if (searchText !== '') {
      const searchRule = async () => {
        setIsLoading(true);
        try {
          const response = await axiosAuth({
            method: 'POST',
            url: '/api/~~~',
            data: { searchText },
          });
          if (isMounted) { // 마운트된 상태 -> 업데이트
            setData(response.data);
            setResults(response.data);
            setIsLoading(false);
          }
        } catch (error) {
          console.error(error);
          if (isMounted) { // 마운트된 상태 -> 에러
            setIsLoading(false);
          }
        }
      };
      searchRule();
    }

    // + 클린업 함수,,, 마운트 상태 false
    return () => {
      isMounted = false;
    };
  }, [searchText]);

  return ( ... )
};

 

>>

 

React의 useEffect 훅을 사용할 때, 클린업(clean-up) 함수를 정의하여 비동기 작업이나 구독을 정리할 수 있다.

이것은 컴포넌트가 언마운트되거나 재랜더링되기 전에 실행되어야 하는 작업을 수행하는 데 사용된다.

 

일반적으로 useEffect 훅 안에서 비동기 작업을 수행할 때, 해당 작업에 대한 참조를 클로저나 컴포넌트의 상태에 저장한다. 그러면 비동기 작업이 완료된 후에 컴포넌트가 언마운트되었는지 확인하고, 언마운트되었다면 작업을 중지하거나 정리할 수 있다.

 

예를 들어, useEffect 내에서 setInterval을 사용하여 일정 시간마다 상태를 업데이트하는 작업을 수행할 때, 컴포넌트가 언마운트되면 해당 setInterval을 클리어(clear)해야 한다.

 

클린업 함수는 useEffect 훅의 반환 값으로 정의되며, useEffect 내에서 클린업 함수를 반환하면 해당 함수는 컴포넌트가 마운트 해제될 때 호출되며, 클린업 함수가 호출되면 이전에 설정한 모든 작업을 정리할 수 있다.

 

예를 들어, useEffect 내에서 구독을 설정한 경우, 클린업 함수에서 해당 구독을 해지할 수 있다. 이것은 메모리 누수를 방지하고, 컴포넌트가 마운트 해제될 때 불필요한 작업이나 구독이 남지 않도록 한다.

 

정리 > useEffect 내에서 setInterval을 사용하여 일정 시간마다 상태를 업데이트하는 작업을 수행할 때,

컴포넌트가 언마운트되면 해당 setInterval을 클리어 해야하는 것과 같은 맥락이다.