JIYIK CN >

To clear a timeout or interval in React using a hook:

1. Use useEffectthe hook to set a timeout or interval.
2. useEffectReturn a function from the hook.
3. Use the clearTimeout()or clearInterval()method to remove the timeout when the component is uninstalled.

import {useEffect, useState} from 'react';

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

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

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

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

If we need to clear the interval, please scroll down to the next section.

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

请注意, we can call the hook multiple times in the same component useEffect.

We useEffectused setTimeout()the method in the hook, but we had to make sure to clear the timeout to avoid memory leaks.

例如, if the component unmounts before the timer expires and we don't clear the timeout, we will have a memory leak.

The function we useEffectreturn from the hook is called when the component unmounts.

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

  // 👇️ runs when component unmounts
  return () => {
    clearTimeout(timer);
  };
}, []);

We use clearTimeoutthe method to cancel the timeout we registered previously.

If the component unmounts before the delay expires, clearTimeoutthe method runs and cancels the timeout.

The approach is the same as when we use clearIntervalthe method to cancel an interval that we registered with .setInterval

import {useEffect, useState} from 'react';

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

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

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

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

We run clearIntervalthe method to cancel the interval we registered earlier when the component unmounts.

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