Clear a timeout or an interval in React with hooks

# Table of Contents

1. Clear a timeout in React with hooks
2. Clear an Interval in React with hooks

# Clear a timeout in React with hooks

To clear a timeout in React:

1. Use the useEffect hook to set up the timeout.
2. Return a function from the useEffect hook.
3. Use the clearTimeout() method to clear the timeout when the component unmounts.

Copied!
import {useEffect, useState} from 'react';

export default function App() {
  const [isShown, setIsShown] = useState(false);

  useEffect(() => {
    const timeoutID = setTimeout(() => {
      setIsShown(true);
    }, 1000);

    return () => {
      // 👇️ Clear the timeout when the component unmounts
      clearTimeout(timeoutID);
    };
  }, []);

  return (
    <div>
      {isShown ? (
        <div>
          <h2>isShown = true</h2>
        </div>
      ) : (
        <div>
          <h2>isShown = false</h2>
        </div>
      )}
    </div>
  );
}

We used the useState hook to keep track of a boolean variable in the state.

Copied!
const [isShown, setIsShown] = useState(false);

We passed an empty dependencies array to the useEffect hook because we only want to register the timeout once - when the component mounts.

Copied!
useEffect(() => {
  const timeoutID = setTimeout(() => {
    setIsShown(true);
  }, 1000);

  return () => {
    // 👇️ Clear the timeout when the component unmounts
    clearTimeout(timeoutID);
  };
}, []);

We used the setTimeout() method in our useEffect hook to set up a timer that executes a function after a delay.

The clearTimeout function is used to clear the timeout, so we can avoid any memory leaks.

For example, if the component unmounts before the timer expires and we don't clear the timeout, we would have a memory leak.

Copied!
return () => {
  clearTimeout(timer);
};

We used the clearTimeout method to cancel the timeout we previously registered.

If the component unmounts before the delay has expired, the clearTimeout method runs and clears the timeout.

# Clear an Interval in React with hooks

To clear an interval in React:

1. Use the useEffect hook to set up the interval.
2. Return a function from the useEffect hook.
3. Use the clearInterval() method to clear the timeout when the component unmounts.

Copied!
import {useEffect, useState} from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalID = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    // 👇️ Cancel the interval when the component unmounts
    return () => {
      clearInterval(intervalID);
    };
  }, []);

  return (
    <div>
      <h2>Count: {count}</h2>
    </div>
  );
}

We used the setInterval() method to repeatedly call a function every N milliseconds.

The clearInterval method is used to cancel the timed, repeating action that we set up using setInterval.

Clearing the interval is necessary because if our component unmounts, the interval would keep going in the background and would cause a memory leak.

Copied!
return () => {
  clearInterval(intervalID);
};

When the component unmounts, the clearInterval method clears the interval.

The cleanup step is important because we want to make sure we don't have any memory leaks in our application.