Очистить тайм-аут, установленный в событии клика в React

Ну, вы можете сохранить тайм-аут в состоянии, а затем очистить его в useEffect следующим образом:

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>
    )
}

Настройка тайм-аута аналогично этому примеру из MDM Web Docs, вероятно, является решением, которое вам нужно. В этом случае вы можете добавить useEffect для очистки при размонтировании компонента.

/* 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])