Scribd
Upload
3 views

preloadModule – React

The document provides an overview of the preloadModule function in React, which allows developers to eagerly fetch an ESM module for improved performance. It details the function's parameters, usage scenarios, and caveats, emphasizing that it can be called during rendering or in event handlers. Additionally, it notes that multiple calls to preloadModule with the same URL are treated as a single call and that it is primarily intended for use in React-based frameworks.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

preloadModule – React

The document provides an overview of the preloadModule function in React, which allows developers to eagerly fetch an ESM module for improved performance. It details the function's parameters, usage scenarios, and caveats, emphasizing that it can be called during rendering or in event handlers. Additionally, it notes that multiple calls to preloadModule with the same URL are treated as a single call and that it is primarily intended for use in React-based frameworks.

Uploaded by

dungeon.dad87
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

20/02/2025, 19:12 preloadModule – React

v19

API REFERENCE APIS

preloadModule

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.

preloadModule lets you eagerly fetch an ESM module that you


expect to use.

preloadModule("https://example.com/module.js", {as: "script"});

Reference

preloadModule(href, options)

Usage

Preloading when rendering


Preloading in an event handler

Reference

preloadModule(href, options)

https://react.dev/reference/react-dom/preloadModule 1/5
20/02/2025, 19:12 preloadModule – React

To preload an ESM module, call the preloadModule function from react-


dom .

import { preloadModule } from 'react-dom';

function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
// ...
}

See more examples below.

The preloadModule function provides the browser with a hint that it should
start downloading the given module, which can save time.

Parameters

href : a string. The URL of the module you want to download.

options : an object. It contains the following properties:

as : a required string. It must be 'script' .

crossOrigin : a string. The CORS policy to use. Its possible values are
anonymous and use-credentials .

integrity : a string. A cryptographic hash of the module, to verify its


authenticity.
nonce : a string. A cryptographic nonce to allow the module when using
a strict Content Security Policy.

Returns

preloadModule returns nothing.

Caveats

Multiple calls to preloadModule with the same href have the same
effect as a single call.
In the browser, you can call preloadModule in any situation: while
rendering a component, in an Effect, in an event handler, and so on.
https://react.dev/reference/react-dom/preloadModule 2/5
20/02/2025, 19:12 preloadModule – React

In server-side rendering or when rendering Server Components,


preloadModule 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 preloadModule when rendering a component if you know that it or its


children will use a specific module.

import { preloadModule } from 'react-dom';

function AppRoot() {
preloadModule("https://example.com/module.js", {as: "script"});
return ...;
}

If you want the browser to start executing the module immediately (rather
than just downloading it), use preinitModule instead. If you want to load a
script that isn’t an ESM module, use preload .

Preloading in an event handler

Call preloadModule in an event handler before transitioning to a page or


state where the module will be needed. This gets the process started earlier
than if you call it during the rendering of the new page or state.

import { preloadModule } from 'react-dom';

function CallToAction() {
const onClick = () => {
preloadModule("https://example.com/module.js", {as: "script"});
startWizard();
https://react.dev/reference/react-dom/preloadModule 3/5
20/02/2025, 19:12 preloadModule – React

}
return (
<button onClick={onClick}>Start Wizard</button>
);
}

PREVIOUS

preload

NEXT

Client APIs

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

https://react.dev/reference/react-dom/preloadModule 4/5
20/02/2025, 19:12 preloadModule – React

Acknowledgements Terms

https://react.dev/reference/react-dom/preloadModule 5/5

You might also like