How would you preload a lazy loaded component before the user actually navigates to it?

You can call the same dynamic import function used inside React.lazy ahead of time, such as when the user hovers over a link, so the code is already downloaded and ready by the time they click. This makes navigation feel instant instead of showing a loading spinner.

const loadDashboard = () => import('./Dashboard');
const Dashboard = React.lazy(loadDashboard);

function NavLink() {
  return (
    <a href="/dashboard" onMouseEnter={loadDashboard}>
      Dashboard
    </a>
  );
}