Kebab file names

snippets/use-component-will-unmount.md

@@ -0,0 +1,36 @@
+---
+title: React useComponentWillUnmount hook
+tags: hooks,effect
+author: chalarangelo
+cover: rocky-beach-3
+firstSeen: 2020-01-03T16:00:56+02:00
+lastUpdated: 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.
+
+```jsx
+const useComponentWillUnmount = onUnmountHandler => {
+  React.useEffect(
+    () => () => {
+      onUnmountHandler();
+    },
+    []
+  );
+};
+```
+
+```jsx
+const Unmounter = () => {
+  useComponentWillUnmount(() => console.log('Component will unmount'));
+
+  return <div>Check the console!</div>;
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <Unmounter />
+);
+```