42 lines
1.1 KiB
Markdown
42 lines
1.1 KiB
Markdown
---
|
|
title: React useUnload hook
|
|
tags: hooks,effect,event
|
|
cover: digital-nomad-14
|
|
firstSeen: 2020-10-05T17:53:24+03:00
|
|
lastUpdated: 2020-11-29T14:16:36+02:00
|
|
---
|
|
|
|
Handles the `beforeunload` window event.
|
|
|
|
- Use the `useRef()` hook to create a ref for the callback function, `fn`.
|
|
- Use the `useEffect()` hook and `EventTarget.addEventListener()` to handle the `'beforeunload'` (when the user is about to close the window).
|
|
- Use `EventTarget.removeEventListener()` to perform cleanup after the component is unmounted.
|
|
|
|
```jsx
|
|
const useUnload = fn => {
|
|
const cb = React.useRef(fn);
|
|
|
|
React.useEffect(() => {
|
|
const onUnload = cb.current;
|
|
window.addEventListener('beforeunload', onUnload);
|
|
return () => {
|
|
window.removeEventListener('beforeunload', onUnload);
|
|
};
|
|
}, [cb]);
|
|
};
|
|
```
|
|
|
|
```jsx
|
|
const App = () => {
|
|
useUnload(e => {
|
|
e.preventDefault();
|
|
const exit = confirm('Are you sure you want to leave?');
|
|
if (exit) window.close();
|
|
});
|
|
return <div>Try closing the window.</div>;
|
|
};
|
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
|
<App />
|
|
);
|
|
```
|