Skip to content

useUnmount

useUnmount is a custom hook that runs a callback function when the component is unmounted.
It leverages React’s useEffect cleanup phase and is useful for resource cleanup, event removal, or request cancellation.

Use Cases

  • Clear timers when a component is unmounted
  • Remove global event listeners
  • Cancel network requests

Usage

tsx
import React, { useState } from 'react'
import { useUnmount } from '@gracefront/hooks'

export default () => {
  const [visible, setVisible] = useState(true)

  useUnmount(() => {
    console.log('Component unmounted, cleanup executed')
  })

  return (
    <>
      {visible && <p>I am a component</p>}
      <button onClick={() => setVisible(false)}>Unmount</button>
    </>
  )
}