Accelerate critical visual resources
A page is certain to need a font or stylesheet and should start fetching it before normal discovery.
React 19+ · Function
preload
preload from react-dom gives the browser an early hint to fetch a resource you expect to use. It can reduce waiting for fonts, stylesheets, images, scripts, and other supported resources.
- Since
- 19
How it works
Call preload from react-dom to give the browser an early hint for a resource you expect to use. React can issue the hint during rendering or from other browser-side code, and repeated calls for the same resource are handled without creating duplicate equivalent hints.
Syntax
preload(href, options)Parameters
| Name | Type | Description |
|---|---|---|
href | string | URL of the resource to download. |
options | object | Resource-hint options. as is required and identifies the resource type; crossOrigin selects the CORS policy. |
Returns
Nothing.
Key points
- Use
preloadto begin fetching an anticipated stylesheet, font, image, external script, or another supported resource before it is consumed. - It is a browser scheduling hint, not a guarantee that the resource will finish downloading before use.
- Browser-side code may call it while rendering, inside an Effect, or from an event handler.
- Rendering-time calls are useful when the current component tree definitely depends on the resource.
- For anticipated navigation or state changes, trigger the hint from the initiating event to start earlier.
- The function has no return value; its effect is the resource hint sent to the browser.
Common mistakes
preloaddownloads or begins fetching a resource; it does not start executing a script. Usepreinitwhen immediate script execution is required.- Check the framework's resource-loading behavior before adding manual calls, because it may already manage these hints.
Example: Preload a font during rendering
import { preload } from 'react-dom';
export function ProductPage() {
preload('/fonts/brand.woff2', { as: 'font', crossOrigin: 'anonymous' });
return <h1 className="product-title">Product</h1>;
}This component hints to the browser to fetch the font while the page renders, before the stylesheet or text necessarily requires it.
When to use it
Warm resources before navigation
A click will navigate to a screen that depends on external assets.
Announce descendant dependencies
A rendered component knows that its descendants will consume a specific image, script, or worker.
Interview questions
QWhat does React's preload function do?
preload is imported from react-dom and accepts a resource URL plus an options object. It gives the browser a hint to begin downloading the resource early, but returns no value.
Follow-up: How would you preload an ESM module? Use preloadModule instead; use preinitModule when it should begin executing immediately.
QWhat are the required arguments and important options?
The href identifies the resource, and options.as tells the browser what kind of resource it is. as is required and supports resource categories such as font, style, script, image, and worker.
Follow-up: What additional option can affect cross-origin loading? Set crossOrigin to anonymous or use-credentials, as appropriate for the resource.
QWhen should an application call preload?
Call preload during rendering when the component or its children are certain to use the resource. You can also call it in an event handler before navigating to a page or state that will need the resource.
Follow-up: Why preload from an event handler? It starts the fetch before the destination renders, giving the browser a head start.
Related
preinitpreloadModulepreinitModuleprefetchDNSpreconnect