Docs
Unmount

Unmount

A Hook can be used to get whether the component is unmounted.

About

The useUnmount hook is a custom React hook that allows you to execute a function when a component is unmounted. This can be useful for cleaning up resources, such as timers or subscriptions, when a component is removed from the DOM.

Parameters

NameTypeDescription
fn() => voidThe function to be executed when the component unmounts.

Return Values

NameTypeDescription
unmountRef{ current: boolean }Whether the component is unmounted

Installation

Run the following command:

npx scriptkavi-hooks@latest add unmount

Usage

import { useUnmount } from "@/hooks/unmount"
import React, { useState } from "react"
 
function ExampleComponent() {
  useUnmount(() => {
    console.log("Component has been unmounted!")
  })
 
  return <div>Example Component</div>
}
 
function App() {
  const [showComponent, setShowComponent] = useState(true)
 
  return (
    <div>
      <button onClick={() => setShowComponent(!showComponent)}>
        Toggle Component
      </button>
      {showComponent && <ExampleComponent />}
    </div>
  )
}
 
export default App
ToggleVisibility Change