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:*

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.

react
react-19
performance

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

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 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 c

The solution is hidden so you can try first

6 min read · 10 sections

Try it in the playground

Open any example in the playground to run and change it.

ReactCalling the preloading APIs and inspecting what lands in the head

Open in 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>
  );
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.