React, Hooks, Effect

Executes a callback immediately before a component is unmounted and destroyed.

  • Use useEffect() with an empty array as the second argument and return the provided callback to be executed only once before cleanup.
  • Behaves like the componentWillUnmount() lifecycle method of class components.
const useComponentWillUnmount = onUnmountHandler => {
    () => () => {
const Unmounter = () => {
  useComponentWillUnmount(() => console.log('Component will unmount'));

  return <div>Check the console!</div>;

ReactDOM.render(<Unmounter />, document.getElementById('root'));
View on GitHub

Recommended snippets

  • Executes a callback immediately after a component is mounted.

  • useUnload

    React, Hooks

    Handles the beforeunload window event.

  • useClickInside

    React, Hooks

    Handles the event of clicking inside the wrapped component.