preloading-resources

djankies's avatarfrom djankies

Teaches resource preloading APIs in React 19 including prefetchDNS, preconnect, preload, and preinit. Use when optimizing initial load or navigation performance.

⭐0stars🔀0forks📁View on GitHub🕐Updated Nov 25, 2025
[Code Generation]

When & Why to Use This Skill

This Claude skill provides expert guidance and implementation patterns for React 19's new resource preloading APIs. It empowers developers to optimize web performance by mastering prefetchDNS, preconnect, preload, and preinit, effectively reducing latency and improving Core Web Vitals for modern frontend applications.

Use Cases

  • Optimizing Initial Load Performance: Use prefetchDNS and preconnect to establish early connections to critical third-party origins like APIs or CDNs, reducing connection overhead.
  • Predictive Resource Loading: Implement preload for fonts, images, and data when a user interacts with navigation elements, ensuring assets are ready before the user completes the transition.
  • Managing Critical Rendering Path: Utilize preinit to prioritize the loading and immediate execution of essential CSS and JavaScript, minimizing render-blocking time and improving First Contentful Paint (FCP).
  • Dynamic Route Optimization: Programmatically trigger resource preloading during route changes or hover states to create a seamless, 'instant-load' user experience.
namepreloading-resources
descriptionTeaches resource preloading APIs in React 19 including prefetchDNS, preconnect, preload, and preinit. Use when optimizing initial load or navigation performance.
allowed-toolsRead, Write, Edit
version1.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.