-
React/memory leak - componentWillUnmount Event 제거 이슈Language/React 2022. 10. 19. 11:08
class Component에서 resize event를 사용하였는데 componentWillUnmount에서 제거해 주어도 메모리 누수가 발생하여 분석 및 처리 내용이다.
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 the componentWillUnmount method.
원인 분석
addEventListener/removeEventListener에 동일한 매개변수와 함수를 전달하여야 하는데
this.handleResize.bind(this)를 전달하면 실제로 새로운 함수로 생성하는 것이므로 두 함수가 동일하지 않다고 한다.
this를 유지하면서 같은 함수를 유지할수 있도록 화살표 함수로 생성하여 전달하니 개선되었다.
문제의 코드
class TestComponent extends Component { ... handleResize() { if (window.innerWidth > 1220) { this.setState({ isMobile: false }); } else { this.setState({ isMobile: true }); } } componentDidMount() { this.handleResize(); window.addEventListener('resize', this.handleResize.bind(this), false); } componentWillUnmount() { window.removeEventListener("resize", this.handleResize.bind(this), false); } ... }
개선된 코드
class TestComponent extends Component { ... handleResize() { if (window.innerWidth > 1220) { this.setState({ isMobile: false }); } else { this.setState({ isMobile: true }); } } componentDidMount() { this.handleResize(); window.addEventListener('resize', this.handleResize); } componentWillUnmount() { window.removeEventListener("resize", this.handleResize); } ... }
위에 에러는 싱글페이지로 다른메뉴 들어갔다가 리사이징 걸린 메뉴 들어온 뒤에 리사이징 실했했을때 에러는 잡았는데..
몇일 지난뒤에.. 겁나 빠르게 리사이징 했더니.. 또난다..
일단 아래 코드도 추가하긴 했는데.. 또난다.. 젝12345.. 다른 이유가 있던지 또다른 방법이 있으면 다시 요거 수정하자!
componentDidMount() { this._ismounted = true; } componentWillUnmount() { this._ismounted = false; } handleResize = () => { if (this._ismounted === true) { ... } };
참조)
https://bitcoden.com/answers/removeeventlistener-not-working-when-called-in-componentwillunmount
'Language > React' 카테고리의 다른 글
React/DropdownSearch 만들기 (0) 2022.12.01 React/moment 사용 탐방 (0) 2022.10.21 React/createContext, useContext 사용하기 (0) 2022.10.12 React/AntV G2plot Chart 적용 (0) 2022.10.12 React/Swiper 적용 (0) 2022.10.12