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.)?

**Target Audience:** Engineers preparing for senior React interviews — assumes basic browser loading concepts. **Difficulty:** Hard > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The export list and the DOM effects in sections 3 and 4 were produced by calling these functions against React 19.2.8 and inspecting document.head . ## 1. Why This Even Matters — A Story First A kitchen knows the evening menu, so it takes stock out of the freezer in the afternoon. The dish is not being cooked yet — it is being made *ready*, so that when the order arrives there is no thawing to wait for. The awkward part in a web app is **who knows**. The head of the document is written once, at build time, by someone who cannot know that a modal three levels deep will eventually need a particular font. The component knows. Until React 19, the component had no way to say so. ## 2. The Core Idea 📌 **Interview term:*

01

Understand the problem

Question presented to candidate: "React 19 added resource preloading APIs. What are they, and what problem do they solve that a plain link tag does not?"

What a strong answer should cover:

Six functions exported from react-dom: preload, preinit, preconnect, prefetchDNS, preloadModule, preinitModule.
They let a component declare a resource need from inside component code, rather than requiring a hand-maintained list of tags in the document head.
preload fetches and caches; preinit fetches and executes/applies. That is the key distinction — preinit a stylesheet and it applies, preinit a script and it runs.
preconnect opens the connection (DNS, TCP, TLS) without fetching anything; prefetchDNS does only the DNS lookup — cheaper, for a host you might use.
React deduplicates calls, so calling from several components is safe.
They work during SSR too, so the hints are emitted into the streamed HTML — earlier than any client-side effect could manage.
Why it matters: the browser preload scanner cannot see resources that only a component knows it needs, so this closes a real gap.
Judgement: preloading everything is counterproductive — it competes for bandwidth with what the page needs right now.

Clarifying questions expected:

"Is the resource needed for this render, or a likely next navigation?" — that decides preload versus prefetch-style hints.

Code / implementation expected: Yes — calling them from a component, and inspecting what lands in the document head.

reactreact-19performance

02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Target Audience: Engineers preparing for senior React interviews — assumes basic browser loading concepts. Difficulty: Hard

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The export list and the DOM effects in sections 3 and 4 were

Solution ready — 2 min read

Classified // press E to declassify

04

Explore the playground snippets

Calling the preloading APIs and inspecting what lands in the head

Run Playground

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

// A component that knows about a resource the document head could never
// predict — it is only needed once this modal opens.
function RichEditor() {
  // Fetch and cache: we will want this font shortly.
  // Fonts need crossOrigin or the browser fetches them twice.
  preload("https://fonts.gstatic.com/s/inter/v13/example.woff2", {
    as: "font",
    type: "font/woff2",
    crossOrigin: "anonymous",
  });

  // Fetch AND apply: this stylesheet should take effect now.
  preinit("https://cdn.example.com/editor-theme.css", { as: "style" });

  return (
    <div style={{ background: "#eef", padding: 12, borderRadius: 8 }}>
      Editor mounted — it declared its own resource needs on render.
    </div>
  );
}

export default function App() {
  const [openEditor, setOpenEditor] = useState(false);
  const [links, setLinks] = useState([]);

  const warmUpApi = () => {
    // Confident we will call this host: open the whole connection.
    preconnect("https://api.example.com");
    // Only a possibility: just resolve the name, which is far cheaper.
    prefetchDNS("https://analytics.example.com");
    inspect();
  };

  const inspect = () =>
    setLinks(
      [...document.head.querySelectorAll("link")]
        .map((l) => l.rel + "  →  " + (l.getAttribute("href") || "").slice(0, 58))
        .filter((s) => s.includes("example")),
    );

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 540 }}>
      <p>
        <button onClick={warmUpApi} style={{ marginRight: 6 }}>
          preconnect + prefetchDNS
        </button>
        <button onClick={() => { setOpenEditor(true); setTimeout(inspect, 50); }}>
          open the editor (preload + preinit)
        </button>{" "}
        <button onClick={inspect}>re-inspect head</button>
      </p>

      {openEditor && <RichEditor />}

      <h4 style={{ margin: "14px 0 6px" }}>Resource hints now in document.head</h4>
      <pre style={{ background: "#f6f6f6", padding: 10, borderRadius: 6, fontSize: 12 }}>
        {links.length ? links.join("\n") : "(none yet — press a button)"}
      </pre>

      <p style={{ color: "#666", fontSize: 13 }}>
        React deduplicates these, so calling them on every render of the editor
        produces one hint each. Notice the editor declared its own needs — no
        central list in the document head had to know about it in advance.
      </p>
    </div>
  );
}

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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