gh-djankies-claude-configs-react-19/skills/preloading-resources/SKILL.md

name, description, allowed-tools, version

name	description	allowed-tools	version
preloading-resources	Teaches resource preloading APIs in React 19 including prefetchDNS, preconnect, preload, and preinit. Use when optimizing initial load or navigation performance.	Read, Write, Edit	1.0.0

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} onMouseEnter={handleMouseEnter}>
      {children}
    </Link>
  );
}

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