Scribd
Upload
8 views

preinitModule – React

The document provides an overview of the preinitModule function in React, which allows for the eager fetching and evaluation of ESM modules. It details the function's parameters, usage scenarios, and caveats, emphasizing its role in optimizing resource loading during component rendering and event handling. Additionally, it notes that multiple calls with the same URL have the same effect as a single call and distinguishes between preinitModule and other related functions like preloadModule.

Uploaded by

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

preinitModule – React

The document provides an overview of the preinitModule function in React, which allows for the eager fetching and evaluation of ESM modules. It details the function's parameters, usage scenarios, and caveats, emphasizing its role in optimizing resource loading during component rendering and event handling. Additionally, it notes that multiple calls with the same URL have the same effect as a single call and distinguishes between preinitModule and other related functions like preloadModule.

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 preinitModule – React

v19

API REFERENCE APIS

preinitModule

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.

preinitModule lets you eagerly fetch and evaluate an ESM


module.

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

Reference

preinitModule(href, options)

Usage

Preloading when rendering


Preloading in an event handler

Reference

preinitModule(href, options)

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

To preinit an ESM module, call the preinitModule function from react-dom .

import { preinitModule } from 'react-dom';

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

See more examples below.

The preinitModule function provides the browser with a hint that it should
start downloading and executing the given module, which can save time.
Modules that you preinit are executed when they finish downloading.

Parameters

href : a string. The URL of the module you want to download and
execute.
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

preinitModule returns nothing.

Caveats

Multiple calls to preinitModule with the same href have the same
effect as a single call.

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

In the browser, you can call preinitModule 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,
preinitModule 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 preinitModule when rendering a component if you know that it or its


children will use a specific module and you’re OK with the module being
evaluated and thereby taking effect immediately upon being downloaded.

import { preinitModule } from 'react-dom';

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

If you want the browser to download the module but not to execute it right
away, use preloadModule instead. If you want to preinit a script that isn’t an
ESM module, use preinit .

Preloading in an event handler

Call preinitModule 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 { preinitModule } from 'react-dom';

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

function CallToAction() {
const onClick = () => {
preinitModule("https://example.com/module.js", {as: "script"});
startWizard();
}
return (
<button onClick={onClick}>Start Wizard</button>
);
}

PREVIOUS

preinit

NEXT

preload

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

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

Code of Conduct Blog

Meet the Team React Native

Docs Contributors Privacy

Acknowledgements Terms

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

You might also like