[ERROR] 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. Error Component St

 

 

---

오류 내용

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. Error Component Stack

 

경고: 언마운트된 컴포넌트에서 React 상태 업데이트를 수행할 수 없습니다. 이는 아무런 작업을 하지 않지만, 애플리케이션에 메모리 누수가 발생했음을 나타냅니다. 이를 해결하려면, useEffect의 cleanup 함수에서 모든 구독과 비동기 작업을 취소해야 합니다.

 

오류 원인

주로 Tab이나 모달창에서 state 상태를 업데이트하지 못해서 발생하는 현상이라고 합니다.

저의 경우, 웹페이지에서 다음과 같은 상황에서 라우터 주소가 변경될때마다 해당 오류가 출력되었습니다.

• '화면 컴포넌트(A) 렌더링 -> (A) 내부의 state 변수 저장 -> 새로운 화면 컴포넌트(B) 이동'

추가로 확인해본 결과, 오류가 발생하는 페이지가 공통적으로 (C)파일을 import하고 있다는 공통점을 발견했습니다. 해당 파일을 디버깅한 결과 (C) 내부의 useState에서 문제가 발생한 것을 확인했습니다. 

 

문제의 코드는 다음과 같습니다.

import { useEffect, useState } from 'react';

const useGetData = () => {
  const [id, setId] = useState('');
  const [dataList, setDataList] = useState<DataType[]>([]);

  useEffect(() => {
    const initOption = async () => {
      const result = await getDataAPI();
      setDataList(result);
    };

    initOption();
  }, [id]);
  
  return { id, setId, dataList }
}

export default useGetData;

 

해결 방법

첫 번째 방법은, 라우터를 이동 전 해당 컴포넌트에서 state 변경 작업을 해주는 것입니다.

두 번째 방법은, React에서 추천하는 useEffect의 cleanup()을 사용하여 state 초기화 작업을 하는 것입니다.

 

저는 두 번째 방법으로 해결을 하였습니다. 해결 코드는 다음과 같습니다.

import { useEffect, useState } from 'react';

const useGetData = () => {
  const [id, setId] = useState('');
  const [dataList, setDataList] = useState<DataType[]>([]);
 
  // 이펙트에 정리 함수를 추가
  useEffect(() => {
    return () => {
      setId('');
      setDataList([]);
    };
  },  []);
  
  useEffect(() => {
    const initOption = async () => {
      const result = await getDataAPI();
      setDataList(result);
    };

    initOption();
  }, [id]);
  
  return { id, setId, dataList }
}

export default useGetData;

 

처리 결과

해당 오류 메시지가 표시되지 않습니다.