20/02/2025, 19:12 preload – React
v19
API REFERENCE APIS
preload
Note
React-based frameworks frequently handle resource loading for you,
so you might not have to call this API yourself. Consult your
framework’s documentation for details.
preload lets you eagerly fetch a resource such as a stylesheet,
font, or external script that you expect to use.
preload("https://example.com/font.woff2", {as: "font"});
Reference
preload(href, options)
Usage
Preloading when rendering
Preloading in an event handler
Reference
preload(href, options)
To preload a resource, call the preload function from react-dom .
https://react.dev/reference/react-dom/preload 1/5
20/02/2025, 19:12 preload – React
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/font.woff2", {as: "font"});
// ...
}
See more examples below.
The preload function provides the browser with a hint that it should start
downloading the given resource, which can save time.
Parameters
href : a string. The URL of the resource you want to download.
options : an object. It contains the following properties:
as : a required string. The type of resource. Its possible values are
audio , document , embed , fetch , font , image , object , script ,
style , track , video , worker .
crossOrigin : a string. The CORS policy to use. Its possible values are
anonymous and use-credentials . It is required when as is set to
"fetch" .
referrerPolicy : a string. The Referrer header to send when fetching.
Its possible values are no-referrer-when-downgrade (the default), no-
referrer , origin , origin-when-cross-origin , and unsafe-url .
integrity : a string. A cryptographic hash of the resource, to verify its
authenticity.
type : a string. The MIME type of the resource.
nonce : a string. A cryptographic nonce to allow the resource when
using a strict Content Security Policy.
fetchPriority : a string. Suggests a relative priority for fetching the
resource. The possible values are auto (the default), high , and low .
imageSrcSet : a string. For use only with as: "image" . Specifies the
source set of the image.
imageSizes : a string. For use only with as: "image" . Specifies the
sizes of the image.
https://react.dev/reference/react-dom/preload 2/5
20/02/2025, 19:12 preload – React
Returns
preload returns nothing.
Caveats
Multiple equivalent calls to preload have the same effect as a single call.
Calls to preload are considered equivalent according to the following
rules:
Two calls are equivalent if they have the same href , except:
If as is set to image , two calls are equivalent if they have the same
href , imageSrcSet , and imageSizes .
In the browser, you can call preload in any situation: while rendering a
component, in an Effect, in an event handler, and so on.
In server-side rendering or when rendering Server Components, preload
only has an effect if you call it while rendering a component or in an async
context originating from rendering a component. Any other calls will be
ignored.
Usage
Preloading when rendering
Call preload when rendering a component if you know that it or its children
will use a specific resource.
Examples of preloading
1. Preloading an external script 2. Preloading a stylesheet 3. Prel
Example 1 of 4:
Preloading an external script
https://react.dev/reference/react-dom/preload 3/5
20/02/2025, 19:12 preload – React
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/script.js", {as: "script"});
return ...;
}
If you want the browser to start executing the script immediately
(rather than just downloading it), use preinit instead. If you want to
load an ESM module, use preloadModule .
Next Example
Preloading in an event handler
Call preload in an event handler before transitioning to a page or state
where external resources will be needed. This gets the process started earlier
than if you call it during the rendering of the new page or state.
import { preload } from 'react-dom';
function CallToAction() {
const onClick = () => {
preload("https://example.com/wizardStyles.css", {as: "style"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}
PREVIOUS
preinitModule
https://react.dev/reference/react-dom/preload 4/5
20/02/2025, 19:12 preload – React
NEXT
preloadModule
Copyright © Meta Platforms, Inc
uwu?
Learn React API Reference
Quick Start React APIs
Installation React DOM APIs
Describing the UI
Adding Interactivity
Managing State
Escape Hatches
Community More
Code of Conduct Blog
Meet the Team React Native
Docs Contributors Privacy
Acknowledgements Terms
https://react.dev/reference/react-dom/preload 5/5
