Chapter 105: React DOM — Resource Preloading APIs

Core Idea

Six small functions (preconnect, prefetchDNS, preinit, preinitModule, preload, preloadModule) let a component hint the browser to start fetching a resource (a font, a script, a stylesheet, a domain connection) earlier than it otherwise would, all sharing the same "call it, React deduplicates and schedules the hint" shape.

Reference Tables

Function	What it hints
`preconnect(href)`	Start the connection handshake (DNS + TCP + TLS) to a domain the app will need soon, before any specific resource request is made.
`prefetchDNS(href)`	The lighter-weight version of `preconnect` — resolve just the DNS lookup for a domain ahead of time, without the full connection setup.
`preload(href, options)`	Fetch a specific resource (font, image, stylesheet, script) early and cache it, without yet executing/applying it.
`preloadModule(href, options)`	Like `preload`, specifically for ES modules.
`preinit(href, options)`	Fetch and actually apply a resource (e.g. insert and run a script, or insert and apply a stylesheet) eagerly.
`preinitModule(href, options)`	Like `preinit`, specifically for ES modules.

Key Concepts

All are hints, not guarantees — the browser decides how to prioritize them; calling one improves the odds a resource is ready sooner, it doesn't force synchronous loading.
Deduplicated automatically: calling the same hint with the same href from multiple components (or multiple times) only results in one actual browser-level request — safe to call from any component that knows it'll need a resource soon, without needing to coordinate a single call site.
preload/preinit are the "will I need this soon" family (fetch now, decide whether/when to apply); preconnect/prefetchDNS are the "I'll be talking to this domain soon" family, operating one level below individual resources.
Typically called during render, in components that know they'll need a resource shortly (e.g. a component about to lazy-load code, or one that knows the next likely user navigation) — these are hint calls, not Hooks, so they don't have the "top level only" restriction.

Code Examples

function VideoPlayer() {
  preload('/fonts/subtitle-font.woff2', { as: 'font' });
  preconnect('https://cdn.example.com');
  // ...
}

What it demonstrates: hinting the browser to start fetching a font and connecting to a CDN domain as soon as this component renders, ahead of when either is strictly needed.

Key Takeaways

These are performance hints — safe to call liberally since duplicate calls are automatically deduplicated by React.
Choose preconnect/prefetchDNS for "I'll talk to this domain soon" and preload/preinit for "I'll need this specific resource soon" (fetch-only vs. fetch-and-apply).
Not Hooks — callable directly in a component body without the Rules of Hooks' top-level-only restriction.

Connects To

Ch 87 (lazy): code-splitting scenarios where preloading the chunk ahead of the actual import() improves perceived speed.