# Common Memory Leak Scenarios in React Projects - 面试题

In React projects, memory leaks primarily refer to applications continuously holding onto memory that is no longer required. This can result in degraded application performance and even crashes. Here are some typical memory leak scenarios:

1. State updates occurring after component unmounting

Example:

javascript
class MyComponent extends React.Component {
  state = { data: null };

  componentDidMount() {
    someAsyncCall().then(data => {
      if (!this.isUnmounted) {
        this.setState({ data });
      }
    });
  }

  componentWillUnmount() {
    this.isUnmounted = true;
  }
}

In the above example, someAsyncCall represents an asynchronous operation. If the component is unmounted before the asynchronous operation completes and the callback still attempts to execute this.setState, this may cause memory leaks. Setting a flag isUnmounted and marking the component as unmounted in componentWillUnmount resolves this issue.

2. Uncleared timers and data subscriptions

Example:

javascript
class MyComponent extends React.Component {
  componentDidMount() {
    this.intervalId = setInterval(this.fetchData, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }

  fetchData = () => {
    // Fetch data from API
  }
}

If the timer is not cleared after component unmounting, it will continue running, preventing the JavaScript engine from reclaiming associated memory and leading to memory leaks. Clearing the timer in componentWillUnmount addresses this problem.

3. Event listeners from external libraries not properly removed

Example:

javascript
class MyComponent extends React.Component {
  componentDidMount() {
    ExternalLibrary.on('data', this.handleData);
  }

  componentWillUnmount() {
    ExternalLibrary.off('data', this.handleData);
  }

  handleData = (data) => {
    // Handle the event
  }
}

If event listeners are not removed correctly, they persist even after component unmounting, causing memory leaks. Removing the listeners in componentWillUnmount is essential.

4. Memory leaks caused by closure references

Example:

javascript
function setup() {
  let largeData = new Array(1000).fill(new Array(1000).fill('data'));

  document.getElementById('button').addEventListener('click', function handleClick() {
    console.log('Button clicked');
  });
}

In the above example, even if the handleClick event handler does not require largeData, it remains in memory due to closure unless handleClick is removed or largeData is explicitly set to null.

5. Long-running WebSocket connections

If a component establishes a connection with a WebSocket service and fails to close it upon unmounting, the connection may persist and retain a reference to the component, resulting in memory leaks.

General recommendations to prevent memory leaks:

When the component unmounts, ensure all subscriptions and asynchronous operations are canceled.
Use the cleanup function of useEffect to handle side effects and related cleanup operations in functional components.
For external event listeners and timers, remove or clear them during component unmounting.
Consider using WeakMap or WeakSet to cache large objects, as they do not interfere with garbage collection.
Avoid storing large amounts of data in component state, especially if the data is no longer needed during the component's lifecycle.
Utilize tools (such as the Memory tab in Chrome Developer Tools) to regularly analyze and debug memory usage.