Site navigation

useSafeTimeout

A utility Hook that allows safely calling `setTimeout` and `clearTimeout` within a component.

useSafeTimeout is a utility Hook that allows safely calling setTimeout and clearTimeout within a component, ensuring that all timeouts are cleared when the component unmounts.

Usage

<State>
  {([]) => {
    const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
    let timeoutId = null

    const handleOnClick = () => {
      timeoutId = safeSetTimeout(() => window.alert('hello!'), 5000)
    }

    const cancelTimeout = () => {
      safeClearTimeout(timeoutId)
    }

    return (
      <>
        <Button onClick={handleOnClick}>Click me</Button>
        <Button onClick={cancelTimeout}>Cancel timeout</Button>
      </>
    )
  }}
</State>

<State>
  {([]) => {
    const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
    let timeoutId = null

    const handleOnClick = () => {
      timeoutId = safeSetTimeout(() => window.alert('hello!'), 5000)
    }

    const cancelTimeout = () => {
      safeClearTimeout(timeoutId)
    }

    return (
      <>
        <Button onClick={handleOnClick}>Click me</Button>
        <Button onClick={cancelTimeout}>Cancel timeout</Button>
      </>
    )
  }}
</State>