How can you clean up side effects in useEffect?

React Hooks - Interview Questions and Answers

Cleaning up side effects in useEffect is crucial for preventing memory leaks and ensuring your components behave correctly. Here's how you do it:

The Cleanup Function :

Within the useEffect callback, you can return a function.
This returned function is known as the "cleanup function."
React calls this cleanup function at specific times.

When the Cleanup Function Is Called :

Component Unmounting :
- When the component is removed from the DOM (unmounted), React calls the cleanup function. This allows you to cancel any ongoing operations or remove event listeners.
Before the Next Effect Run (Dependencies Change):
- If the useEffect Hook has a dependency array, and the values in that array change, React will:
  - Call the cleanup function from the previous effect.
  - Then, run the new effect.
- This ensures that any previous side effects are properly cleaned up before a new one is started.

Common Scenarios for Cleanup :

Timers :
- If you use setTimeout or setInterval in your effect, you need to clear the timers in the cleanup function.
Event Listeners :
- If you add event listeners to the DOM, you need to remove them in the cleanup function.
Subscriptions :
- If you subscribe to data streams or other sources, you need to unsubscribe in the cleanup function.
Fetch aborts :
- If you have a fetch request running, when dependencies change, or the component unmounts, you may wish to abort the fetch.

Example: Cleaning Up a Timer :

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const timerID = setInterval(() => {
      setSeconds((prevSeconds) => prevSeconds + 1);
    }, 1000);

    return () => {
      clearInterval(timerID); // Cleanup function
    };
  }, []);

  return <div>Seconds: {seconds}</div>;
}

export default Timer;

In this example :

The setInterval function sets up a timer.
The cleanup function, clearInterval(timerID), is returned from the useEffect callback.
When the component unmounts, React calls the cleanup function, clearing the timer.

Key Points :

Always provide a cleanup function for effects that require it.
Cleanup functions are essential for preventing memory leaks and ensuring your components are well-behaved.
Thinking of the cleanup function as the reverse of what you did in the effect is a good way to structure it.

By using cleanup functions, you can keep your React applications clean and efficient.