hardFrontend

What are the resource preloading APIs in React 19 (`preload`, `preinit`, etc.)?

Q: What are the resource preloading APIs in React 19 (`preload`, `preinit`, etc.)?

**Core concept (TL;DR).** React 19 (via react-dom ) exposes functions that **hint the browser to load resources early** — preload , preinit , preconnect , and prefetchDNS . You call them during render to start fetching fonts, stylesheets, scripts, or to warm up a connection, improving load performance. React **deduplicates** the hints. Tell the browser to fetch/connect early preload(url, {as}) — fetc

335 views

Understand the problem

Hinting the browser to load resources early from react-dom.

reactreact-19performance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

Emitting resource hints

Run Playground

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

// React 19 resource hints inject <link rel> tags into <head>.
preconnect('https://fonts.gstatic.com');
prefetchDNS('https://api.example.com');

export default function App() {
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <h2>Resource hints emitted</h2>
      <p>React injected preconnect + dns-prefetch links into the document head.</p>
      <p style={{ color: '#666' }}>Open devtools and inspect &lt;head&gt; to see the &lt;link&gt; tags.</p>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

When does `React.memo` do nothing — or actually hurt performance?

What is hydration in React?