preinitModule

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)

To preinit an ESM module, call thepreinitModule function fromreact-dom.

import{preinitModule}from'react-dom';

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

See more examples below.

ThepreinitModule function provides the browser with a hint that it should start downloading and executing the given module, which can save time. Modules that youpreinit 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. TheCORS policy to use. Its possible values areanonymous anduse-credentials.
  • integrity: a string. A cryptographic hash of the module, toverify its authenticity.
  • nonce: a string. A cryptographicnonce to allow the module when using a strict Content Security Policy.

Returns

preinitModule returns nothing.

Caveats

• Multiple calls topreinitModule with the samehref have the same effect as a single call.
• In the browser, you can callpreinitModule 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

CallpreinitModule 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';

functionAppRoot(){
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, usepreloadModule instead. If you want to preinit a script that isn’t an ESM module, usepreinit.

Preloading in an event handler

CallpreinitModule 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';

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