chaance

/**
 * ------------------------------------------------------------------------------
 * IMPORTANT UPDATE:
 * This is *not* a complete implementation and I do not suggest using it!. This
 * was primarily an experiment to determine whether or not a decent blocking
 * hook could be implemented in userland, and the answer we came up with is NO.
 *
 * Luckily we added `usePrompt` (behind an `unstable_` flag) back to React Router
 * a few versions ago! It's not documented [and I'm no longer on the team, so I
 * probably won't try to do anything about that], but you can see it in source.

MarksCode

/**
 * Prompts a user when they exit the page
 */

import { useCallback, useContext, useEffect } from 'react';
import { UNSAFE_NavigationContext as NavigationContext } from 'react-router-dom';

function useConfirmExit(confirmExit: () => boolean, when = true) {
  const { navigator } = useContext(NavigationContext);

brophdawg11

// Assume you want to do this in your routes, which are in the critical path JS bundle
<Route path="lazy" loader={lazyLoader} element={<Lazy />} />

// And assume you have two files containing your actual load and component:
// lazy-loader.ts -> exports the loader
// lazy-component.ts -> exports the component

// We'll render the component via React.lazy()
let LazyActual = React.lazy(() => import("./lazy-component"));