Preloading APIs (preload, preinit)
Browser Hints
The Shift: Instead of manually adding <link rel="preload"> tags in your index.html and hoping they match your components, you can imperatively tell the browser to start loading fonts or scripts before the component even renders.
👀 Preview
Resources can be preloaded imperatively, improving performance by starting downloads before they're needed.
📚 Explanation
`react-dom` exposes a ladder of resource hints, cheapest to strongest: `prefetchDNS` (resolve DNS only), `preconnect` (DNS + TCP + TLS), `preload` (download without executing — fonts, images, stylesheets, scripts you'll need soon) and `preinit` (download and execute/insert immediately — scripts and stylesheets). They're plain functions, not hooks, so they work anywhere: called during render, SSR streams the matching `<link>` tags early in the `<head>`; called in event handlers, they enable the hover-to-preload pattern that hides latency before a navigation. All of them dedupe by href, so repeated calls cost nothing. Interview nuances: fonts require `crossOrigin: 'anonymous'` because font fetches are CORS-mode requests by spec; `preinit` for stylesheets takes a `precedence` option to control insertion order; and these hints complement — not replace — framework-level preloading like Next.js route-chunk prefetching.
How well did you remember this?