Global event handlers should be properly removed during React component lifecycle

• REACT_MISSING_CLEANUP_IN_LIFECYCLE
• Error
• Medium
• react

This rule applies when global event handlers are added, but not removed properly during the lifecycle of a React class component.

In general, global handlers added atcomponentDidMount() should be explicitly removed atcomponentWillUnmount() because they persist beyond the React component lifecycle.

If the handler is not removed,

1. It can be executed unnecessarily.
2. Data reachable from it cannot be garbage-collected and a memory leak would occur.

Currently, this rule detects alarms on the following global handlers:

1. Event listeners on thewindow object
2. Event listeners on thedocument object
3. setInterval() handlers

Noncompliant Code Example

import React from 'react';export default class Hello extends React.Component {  update = () => {    this.forceUpdate();  }  componentDidMount() {    window.addEventListener('hashchange', this.update, false); // REACT_MISSING_CLEANUP_IN_LIFECYCLE alarm  }  componentWillUnmount() {    window.removeEventListener('hashChange', this.update, false); // 'C' is upper-case  }  render() {    return <div>Hello</div>;  }}

Compliant Code Example

import React from 'react';export default class Hello extends React.Component {  update = () => {    this.forceUpdate();  }  componentDidMount() {    window.addEventListener('hashchange', this.update, false);  }  componentWillUnmount() {    window.removeEventListener('hashchange', this.update, false);  }  render() {    return <div>Hello</div>;  }}

Version

This rule was introduced in DeepScan 1.27.0.

Was this documentation helpful?