30-seconds-of-code/snippets/use-component-will-unmount.md

title, tags, author, cover, firstSeen, lastUpdated

title	tags	author	cover	firstSeen	lastUpdated
React useComponentWillUnmount hook	hooks,effect	chalarangelo	rocky-beach-3	2020-01-03T16:00:56+02:00	2021-10-13T19:29:39+02:00

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.createRoot(document.getElementById('root')).render(
  <Unmounter />
);