useBeforeUnload

This hook is simply a re-export of React Router’s useBeforeUnload.

This hook is just a helper around window.onbeforeunload.

When users click links to pages they haven’t visited yet, Remix loads the code-split modules for that page. If you deploy in the middle of a user’s session, and you or your host removes the old files from the server (many do 😭), then Remix’s requests for those modules will fail. Remix recovers by automatically reloading the browser at the new URL. This should start over from the server with the latest version of your application. Most of the time this works out great, and user doesn’t even know anything happened.

In this situation, you may need to save important application state on the page (to something like the browser’s local storage), because the automatic page reload will lose any state you had.

Remix or not, this is a good practice. The user can change the url, accidentally close the browser window, etc.

  1. import { useBeforeUnload } from "@remix-run/react";
  3. function SomeForm() {
  4.   const [state, setState] = React.useState(null);
  6.   // save it off before the automatic page reload
  7.   useBeforeUnload(
  8.     React.useCallback(() => {
  9.       localStorage.stuff = state;
  10.     }, [state])
  11.   );
  13.   // read it in when they return
  14.   React.useEffect(() => {
  15.     if (state === null && localStorage.stuff != null) {
  16.       setState(localStorage.stuff);
  17.     }
  18.   }, [state]);
  20.   return <>{/*... */}</>;
  21. }

For more information and usage, please refer to the React Router useBeforeUnload docs.