preinit parameters
preinit accepts two parameters: (1) href: a string, the URL of the resource to download and execute; (2) options: an object with properties. The options object contains: as (required string, possible values: 'script' or 'style'), precedence (required string for stylesheets, possible values: 'reset', 'low', 'medium', 'high', controls insertion order relative to other stylesheets), crossOrigin (string, CORS policy, possible values: 'anonymous' or 'use-credentials'), integrity (string, cryptographic hash to verify authenticity), nonce (string, cryptographic nonce for strict Content Security Policy), fetchPriority (string, fetch priority suggestion, possible values: 'auto' (default), 'high', 'low').
preinit stylesheet precedence requirement
The precedence option is required when preiniting stylesheets. It controls the order of stylesheets within the document. Stylesheets with higher precedence can overrule those with lower precedence.
preinit vs preinitModule for ESM modules
Use preinitModule instead of preinit if you want to load an ESM module.
preinit vs preload difference
Use preload instead of preinit if you want the browser to download a script but not execute it right away, or to download a stylesheet but not insert it into the document right away.
preinit in event handler example
import { preinit } from 'react-dom';
function CallToAction() {
const onClick = () => {
preinit("https://example.com/wizardStyles.css", {as: "style"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}
preinit example with stylesheet
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/style.css", {as: "style", precedence: "medium"});
return ...;
}
preinit example with external script
import { preinit } from 'react-dom';
function AppRoot() {
preinit("https://example.com/script.js", {as: "script"});
return ...;
}
preinit usage contexts
In the browser, you can call preinit 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, preinit 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.
preinit multiple calls behavior
Multiple calls to preinit with the same href have the same effect as a single call.
preinit behavior for scripts and stylesheets
Scripts that you preinit are executed when they finish downloading. Stylesheets that you preinit are inserted into the document, which causes them to take effect immediately.
preinit function signature and basic usage
The preinit function from react-dom lets you eagerly fetch and evaluate a stylesheet or external script. The function signature is preinit(href, options). It returns nothing. Call it from react-dom using: import { preinit } from 'react-dom';
preloadModule function signature
The preloadModule function is imported from 'react-dom' and called with two parameters: preloadModule(href, options). It returns nothing.
preloadModule href parameter
The href parameter is a required string containing the URL of the ESM module you want to download.
preloadModule options parameter
The options parameter is a required object with the following properties: as (required string, must be 'script'), crossOrigin (string, CORS policy with values 'anonymous' or 'use-credentials'), integrity (string, cryptographic hash to verify authenticity), nonce (string, cryptographic nonce for strict Content Security Policy).
preloadModule eagerly fetches ESM modules
preloadModule lets you eagerly fetch an ESM module that you expect to use, providing the browser with a hint to start downloading the given module.
preloadModule multiple calls idempotent
Multiple calls to preloadModule with the same href have the same effect as a single call.
preloadModule versus preinitModule
Use preinitModule instead of preloadModule if you want the browser to start executing the module immediately rather than just downloading it.
preloadModule versus preload
Use preload instead of preloadModule if you want to load a script that is not an ESM module.
preloadModule basic import and usage
To use preloadModule, import it from 'react-dom': import { preloadModule } from 'react-dom'; then call it with the module URL and options object.
preloadModule in component rendering example
import { preloadModule } from 'react-dom';
function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
return ...;
}
preloadModule in event handler example
import { preloadModule } from 'react-dom';
function CallToAction() {
const onClick = () => {
preloadModule("https://example.com/module.js", {as: "script"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}
preload equivalence rules for multiple calls
Multiple equivalent calls to preload have the same effect as a single call. Two calls are considered equivalent if they have the same href, with one exception: if as is set to image, two calls are equivalent if they have the same href, imageSrcSet, and imageSizes.
preload return value
The preload function returns nothing.
preload function signature and parameters
The preload function from react-dom is called as preload(href, options). The href parameter is a string containing the URL of the resource to download. The options parameter is an object with the following properties: as (required string, type of resource: audio, document, embed, fetch, font, image, object, script, style, track, video, or worker), crossOrigin (string, CORS policy: anonymous or use-credentials, required when as is fetch), referrerPolicy (string, Referrer header: no-referrer-when-downgrade, no-referrer, origin, origin-when-cross-origin, unsafe-url, default is no-referrer-when-downgrade), integrity (string, cryptographic hash for authenticity verification), type (string, MIME type of resource), nonce (string, cryptographic nonce for Content Security Policy), fetchPriority (string, relative fetch priority: auto, high, low, default is auto), imageSrcSet (string, for as: image only, specifies source set), imageSizes (string, for as: image only, specifies sizes).
preload allows eager fetching of resources
The preload function lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use. The function provides the browser with a hint to start downloading the given resource, which can save time.
preload imageSrcSet and imageSizes usage
The imageSrcSet and imageSizes options are for use only with as: image. They help the browser fetch the correctly sized image for the size of the screen by specifying the source set and sizes of the image.
preload crossOrigin required when as is fetch
The crossOrigin option is required when the as option is set to fetch.
preload example: preloading in event handler
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>
);
}
preload example: preloading a responsive image
import { preload } from 'react-dom';
function AppRoot() {
preload("/banner.png", {
as: "image",
imageSrcSet: "/banner512.png 512w, /banner1024.png 1024w",
imageSizes: "(max-width: 512px) 512px, 1024px",
});
return ...;
}
preload example: preloading font with stylesheet
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/style.css", {as: "style"});
preload("https://example.com/font.woff2", {as: "font"});
return ...;
}
preload example: preloading an external script
import { preload } from 'react-dom';
function AppRoot() {
preload("https://example.com/script.js", {as: "script"});
return ...;
}
preload calling context in server-side rendering
In server-side rendering or when rendering Server Components, preload only has an effect if called while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
preload calling context in browser
In the browser, preload can be called in any situation: while rendering a component, in an Effect, in an event handler, and so on.
React DOM section content
React DOM contains features only supported for web applications running in the browser DOM environment. It includes Hooks for web applications, Components supporting all browser built-in HTML and SVG components, APIs from the react-dom package, Client APIs from react-dom/client for rendering on the client in the browser, Server APIs from react-dom/server for rendering to HTML on the server, and Static APIs from react-dom/static for generating static HTML.