메모리 누수 에러 도와주세요 (리액트네이티브입문)

리액트 네이티브 프로젝트에 앞서 스터디 형식으로 페이지를 구현중입니다.
프로그래밍 수준은 초급수준입니다. 주업무가 퍼블리셔고 제이쿼리만 사용하다가 최근 리액트네이티브로 웹페이지 구현을 해야하는 상황이 생겨 사내 개발자들이 모두 자체적으로 스터디를 하고 있는 중이에요.

로컬에 mysql과 express를 활용항 api 형식으로 데이터를 받아와 리스트로 뿌려주는 페이지를 구현중이고 비동기 데이터 요청 진행중에 loading 컴포넌트를 연결하여 로딩 페이지를 출력할 수 있도록 작업중입니다.

실제로 페이지 뷰 자체에는 문제가 없지만 로딩 페이지를 연결하면 간헐적으로

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.

에러가 발생하고 있고 이 부분이 해결이 안되어 질문 올립니다.

에러에서 표시해주는 코드라인 부분을 추적해보니 로딩 페이지에서 사용중인 이미지 소스 부분이 표시됩니다.

로딩페이지에는
<Image
style={{width:‘100%’, height: ‘100%’}}
source={require(’…/assets/loader-1.png’)}
/>
이런 이미지소스를 사용하고 있습니다.

실제로 이미지 부분을 주석처리하고 테스트해보면 메모리 누수 에러가 나타나지 않고 있는데요,

저 에러를 구글링해보면 클린업 함수로 useEffect를 초기화 하라는 해결방법을 찾을 수 있는데 이걸 어디에 어떻게 적용해야 하는건지 감이 안잡힙니다…

로딩 페이지 구조는 컨테이너에서 초기값을 true로 하는 loading 스테이트를 로딩 페이지와 실제 리스트 페이지를 뿌려줄 수 있는 컨테이너 컴포넌트까지 전달하고, 컨테이너에서 로딩 스테이트의 true, false값을 비교하여 로딩 컴포넌트와 리스트 컴포넌트를 보여줄 수 있도록 하였습니다.

  1. 컴포넌트가 마운트
  2. 비동기 로직과 함께, setState 로 스테이트 변경 요청
  3. 컴포넌트가 언마운트
  4. 비동기 로직이 끝나면서, 스테이트 변경이 실행

쉽게 예를 들면, 위의 경우에 해당 경고를 발생시킵니다.
useEffect 클린업 함수에서, 비동기 호출을 취소시하거나 (요청을 취소 > 리소스 절감)
요청 완료 부분에서, isMounted 와 같은 flag 를 두어서 setState 를 막는 방법이 있습니다. (요청 리소스는 그대로, 경고만 방지)

한두개의 경우는 크게 신경 안써도 될 것 같으나
로딩 컴포넌트같이, 여러 요소에 적용되어 많이 사용될 경우에는 해결하고 넘어가시는게 좋을 것 같아 보입니다.

답변감사합니다
제 수준에선 이해하기 조금 어려우나 개발자 직원분과 공유하여 고민해보도록 하겠습니다.