useSafeTimeout

import React from 'react'
import {useSafeTimeout} from '@primer/react'


export default function Default() {
  const {safeSetTimeout, safeClearTimeout} = useSafeTimeout()
  let timeoutId: number | null = null


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


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


  return (
    <div style={{display: 'flex', gap: '1rem'}}>
      <button onClick={handleOnClick}>Show alert after 3 seconds</button>
      {timeoutId ?? <button onClick={cancelTimeout}>Cancel alert</button>}
    </div>
  )
}