React, Hooks, Effect, Event

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.
const useUnload = fn => {
  const cb = React.useRef(fn);

  React.useEffect(() => {
    const onUnload = cb.current;
    window.addEventListener('beforeunload', onUnload);
    return () => {
      window.removeEventListener('beforeunload', onUnload);
  }, [cb]);
const App = () => {
  useUnload(e => {
    const exit = confirm('Are you sure you want to leave?');
    if (exit) window.close();
  return <div>Try closing the window.</div>;
ReactDOM.render(<App />, document.getElementById('root'));
View on GitHub

Recommended snippets

  • useClickInside

    React, Hooks

    Handles the event of clicking inside the wrapped component.

  • useClickOutside

    React, Hooks

    Handles the event of clicking outside of the wrapped component.

  • usePersistedState

    React, Hooks

    Returns a stateful value, persisted in localStorage, and a function to update it.