Skip to content
masterclassBuddyTech Buzz5 fresh blogs · 5:00 AM IST
Start learning

React 19+ · Function

preinit

preinit from react-dom eagerly fetches and initializes an external script or stylesheet. Scripts execute after download; stylesheets are inserted and applied immediately.

Since
19

How it works

Call preinit from react-dom to tell the browser to fetch a script or stylesheet early. Scripts execute after downloading, while stylesheets are inserted into the document and take effect immediately.

Syntax

preinit(href, options)

Parameters

NameTypeDescription
hrefstringURL of the resource to download and execute.
optionsobjectConfiguration object. as is required and must be script or style; stylesheet initialization also requires precedence. It may include crossOrigin and fetchPriority.

Returns

Nothing (undefined).

Key points

  • The API is for eager resource initialization, covering external scripts and stylesheets.
  • Import preinit from react-dom, not from the core react package.
  • Its purpose is to move resource discovery and work earlier so later rendering can be faster.
  • The options object must identify the resource kind with as.
  • The supported resource kinds are scripts and stylesheets.
  • Use stylesheet precedence to control relative cascade ordering.

Common mistakes

  • A stylesheet must provide precedence; omitting it makes the stylesheet configuration invalid.
  • Only preinit scripts whose immediate execution is acceptable should be used, because downloading completion triggers execution.
  • Preinitializing a stylesheet changes the document immediately rather than merely warming the cache.

Example: Eagerly initialize resources

import { preinit } from 'react-dom';

export default function AppRoot() {
  preinit('https://example.com/app.js', { as: 'script' });
  preinit('/theme.css', { as: 'style', precedence: 'high' });
  return <main>Application</main>;
}

The component eagerly fetches and evaluates the script and fetches and applies the stylesheet during rendering.

When to use it

Start required resource work early

A component and its descendants are known to need a resource during rendering.

Prepare for an anticipated transition

A user is about to navigate to a view that needs an external script or stylesheet.

Set stylesheet precedence

A stylesheet must participate in a controlled cascade order.

Interview questions

QWhat does preinit do, and what does it return?

preinit is a resource-hint API imported from react-dom. It asks the browser to eagerly fetch and evaluate an external script or fetch and insert a stylesheet; it returns nothing.

Follow-up: When would you avoid it? Avoid it when immediate script execution or stylesheet application is not acceptable, or when the resource may never be needed.

QWhich arguments are required?

The first argument is the resource URL. The options object requires as: 'script' or as: 'style'; stylesheet use also requires a precedence value.

Follow-up: What precedence values are documented? reset, low, medium, and high; higher precedence can override lower precedence.

QWhere and when should preinit be called?

Call it while rendering when the component or its children are known to need a resource. It can also be called in an event handler before transitioning to a page or state that needs external resources.

Follow-up: Why use an event handler? It lets the browser begin fetching before the anticipated transition occurs.

  • preload
  • preloadModule
  • preinitModule
  • prefetchDNS
  • preconnect

Source: preinit – React. Checked 2026-10-15.