Preloading Resources

Resource Preloading APIs

React 19 adds functions for optimizing resource loading.

Available Functions

import { prefetchDNS, preconnect, preload, preinit } from 'react-dom';

prefetchDNS

Perform DNS resolution early:

function App() {
  prefetchDNS('https://api.example.com');
  prefetchDNS('https://cdn.example.com');

  return <div>App content</div>;
}

preconnect

Establish connection before needed:

function App() {
  preconnect('https://api.example.com');

  return <div>App content</div>;
}

preload

Preload resources without executing:

function App() {
  preload('/font.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
  preload('/hero-image.jpg', { as: 'image' });
  preload('/critical.css', { as: 'style' });

  return <div>App content</div>;
}

preinit

Preload and execute resource:

function App() {
  preinit('/critical.js', { as: 'script' });
  preinit('/critical.css', { as: 'style', precedence: 'high' });

  return <div>App content</div>;
}

Use Cases

On Route Hover:

function NavLink({ to, children }) {
  const handleMouseEnter = () => {
    preload(`/api/data${to}`, { as: 'fetch' });
    preinit(`/routes${to}.js`, { as: 'script' });
  };

  return (
    <Link to={to}
      {children}
    </Link>
  );
}

For comprehensive preloading documentation, see: research/react-19-comprehensive.md lines 811-834.