Clear Timeout set in click event in React

Question

I'm wondering how to clear a timeout, which is set in an onclick event in React. I'm aware you can easily cancel timeouts, when they are set in 'useEffect', but how about this use case?

export default function SomeComponent() {
    const onClick = () => {
        setTimeout(() => {
            // dome some logic like API calls,
            // which should be terminated, in case the component
            // is unmounted
        }, 2_500)
    }

  return (
    <div><button onClick={onClick}>Click me!</button></div>
  )
}

Your question already answered here https://stackoverflow.com/questions/71499969/settimeout-and-cleartimeout-in-react, please check it out. — Namwanza Ronald, Nov 24 '22 at 07:38

score 1 · Accepted Answer · answered Nov 24 '22 at 07:40

Setting up your timeout in a manner similar to this example from MDM Web Docs is likely the solution you're after. In this case, you can add a useEffect to clear on component unmount.


/* Code taken from MDN Docs */
const alarm = {
  remind(aMessage) {
    alert(aMessage);
    this.timeoutID = undefined;
  },

  setup() {
    if (typeof this.timeoutID === 'number') {
      this.cancel();
    }

    this.timeoutID = setTimeout((msg) => {
      this.remind(msg);
    }, 1000, 'Wake up!');
  },

  cancel() {
    clearTimeout(this.timeoutID);
  }
};

/* Clear timeout on component unmount */
useEffect(() => {
  return () => {
    alarm.cancel()
  }
}, [alarm])

score 0 · Answer 2 · answered Nov 24 '22 at 07:39

Well you can save the timeout to a state and then clear it in the useEffect like this:

export default function SomeComponent() {
    const [timeoutInstance, setTimeoutInstance] = useState(null);
    const onClick = () => {
        const timeout = setTimeout(() => {
            // dome some logic like API calls,
            // which should be terminated, in case the component
            // is unmounted
        }, 2_500);
        setTimeoutInstance(timeout);
    }

    useEffect(() => {
      return () => {
        if(timeoutInstance) {
          clearTimeout(timeoutInstance);
          setTimeoutInstance(null);
        }
      }
    }, []);

    return (
      <div><button onClick={onClick}>Click me!</button></div>
    )
}

Clear Timeout set in click event in React

2 Answers2