React useComponentWillUnmount hook

React, Hooks, Effect · Oct 13, 2021

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

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

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

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

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this