DBILITY

react To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. 본문

front-end & ui/react

react To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

DBILITY 2022. 4. 5. 12:30
반응형
react_devtools_backend.js:3973 
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.
    at LoginPage (http://localhost:3000/static/js/bundle.js:1019:63)

위와 같은 경고가 발생했다.

useEffect로 onload event를 적용했는데, return이 없다고 그냥 비워둬서 그런가 보다 했으나,저것이 한번만 나타나고 사라지는 것이었다. 재시작하면 또 나오고...

useEffect cleanup function이라는 것이 뭔가 찾아 보았다.

https://velog.io/@ohgoodkim/-%EC%97%90%EB%9F%AC%EB%85%B8%ED%8A%B8-Cant-perform-a-React-state-update-on-an-unmounted-component

 

❗️📚 에러노트 - Can't perform a React state update on an unmounted component

에러발생 리액트를 이용하여 모달 컴포넌트를 개발 하던중 다음과 같은 에러가 발생하였다. 경고! 언마운티드된 컴포넌트에 대해서는 상태 업데이트를 수행할 수 없다. 해당 작업은 수행되지

velog.io

 

https://norwayy.tistory.com/m/370

 

이슈 해결 - Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in

Goal  - 컴포넌트가 unmount된 후 해당 컴포넌트의 state를 업데이트했을 때 발생하는 이슈 공유  - 해당 이슈 해결 과정 공유 리엑트에서 비동기 동작은 정말 흔하다. 서버에 데이터를 요청하거나, s

norwayy.tistory.com

 

아래 블로그를 보니 async fetch시에는 AbortController를 사용해야 umount시에 cleanup을 통해 중단시킨다고 한다.

https://yceffort.kr/2021/02/memory-leak-and-useeffect

 

Home

yceffort

yceffort.kr

 

반응형
저작자표시

'front-end & ui > react' 카테고리의 다른 글

react v18 UseTransition, useDeferredValue hook  (0) 2022.06.07
react file upload, dropzone  (0) 2022.04.13
react react-hook-form  (0) 2022.03.24
react state-management zustand  (0) 2022.03.15
react spring boot multipart upload  (0) 2022.02.22
공유하기 링크
'front-end & ui/react' Related Articles more
Comments