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 at componentDidMount() should be explicitly removed at componentWillUnmount() 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 the window object
2. Event listeners on the document 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.

See

• React 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.