Update useUnload.md

snippets/useUnload.md

@@ -1,48 +1,36 @@
 ---
 title: useUnload
-tags: visual,ref,effect,beginner
+tags: hooks,effect,event,intermediate
 ---
 
-A hook that listens to `beforeunload` event and trigger the default prompt when the user is leaving or closing the browser's session
+A hook that handles for the `beforeunload` window event.
 
-- Create a custom hook that takes a function on what do you want to do when the event is triggered
+- Use the `useRef()` hook to create a ref for the callback function, `fn`. 
-- Use the `React.useRef()` hook to create a `ref` for your function
+- Use the `useEffect()` hook and `EventTarget.addEventListener()` to handle the `'beforeunload'` (when the user is about to close the window).
-- Use the `React.useEffect()` hook to add the listener and clean up the `beforeunload` event.
+- Use `EventTarget.removeEventListener()` to perform cleanup after the component is unmounted.
 
-```js
+```jsx
-// unload.js
+const useUnload = fn => {
-import { useRef, useEffect } from 'react'
+  const cb = React.useRef(fn);
 
-const useUnload = (fn) => {
+  React.useEffect(() => {
-  const cb = useRef(fn)
+    const onUnload = cb.current;
-  useEffect(() => {
+    window.addEventListener('beforeunload', onUnload);
-    const onUnload = cb.current
-      window.addEventListener('beforeunload', onUnload)
     return () => {
-        window.removeEventListener('beforeunload', onUnload)
+      window.removeEventListener('beforeunload', onUnload);
-      }
+    };
-  }, [cb])
+  }, [cb]);
-}
+};
-
-export default useUnload
-
 ```
-To use this in a global level, apply it in `App.js`
 
-```js
+```jsx
-// App.js
+const App = () => {
-import useUnload from './unload'
+  useUnload(e => {
-
+    e.preventDefault();
-function App {
+    const exit = confirm('Are you sure you want to leave?');
-
+    if (exit) window.close();
-  useUnload((e) => {
+  });
-    e.preventDefault() // Required for Firefox
+  return <div>Try closing the window.</div>;
-    e.returnValue = ''
+};
-    delete e.returnValue
+ReactDOM.render(<App />, document.getElementById('root'));
-  })
-
-  return (
-    // Your app
-  )
-}
 ```