useOnUnmount

The useOnUnmount hook is helpful when you want to run a callback function after the component has unmounted. It relies on the React.useEffect() hook internally.

useOnUnmount

Unmounted: 0 time

Unmount

Try mounting and unmounting the component and see the status of count update.Check console for unmount message

Caution

In React version 18.x.x and above, when the development mode includes the usage of <React.StrictMode/> and is enabled, components may undergo a double mounting/unmounting process. As a result, any callback associated with these components will also be executed twice during this initial mounting/unmounting.

Usage

Import the hook from @abhushanaj/react-hooks and use in required component;

./src/App.tsx

import { useOnUnmount } from '@abhushanaj/react-hooks';

function App() {
  useOnUnmount(() => {
    console.log('Unmounted!');
  });

  return (
    <div>
      <p>I am now mounted!</p>
    </div>
  );
}

export default App;

API Reference

Parameters

Parameter	Type	Description	Default
callback	()=>void	The callback function to run after component unmount.	N/A