Skip to main content

preload

The preload function is currently only available in React's Canary and experimental channels. Learn more about React's release channels here.

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.

preload lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.

preload("https://example.com/font.woff2", {as: "font"});

Reference ​

preload(href, options) ​

To preload a resource, call the preload function from react-dom.

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/font.woff2", {as: "font"});
  // ...
}

See more examples below.

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

Parameters ​

  • href: a string. The URL of the resource you want to download.
  • options: an object. It contains the following properties:
    • as: a required string. The type of resource. Its possible values are audio, document, embed, fetch, font, image, object, script, style, track, video, worker.
    • crossOrigin: a string. The CORS policy to use. Its possible values are anonymous and use-credentials. It is required when as is set to "fetch".
    • referrerPolicy: a string. The Referrer header to send when fetching. Its possible values are no-referrer-when-downgrade (the default), no-referrer, origin, origin-when-cross-origin, and unsafe-url.
    • integrity: a string. A cryptographic hash of the resource, to verify its authenticity.
    • type: a string. The MIME type of the resource.
    • nonce: a string. A cryptographic nonce to allow the resource when using a strict Content Security Policy.
    • fetchPriority: a string. Suggests a relative priority for fetching the resource. The possible values are auto (the default), high, and low.
    • imageSrcSet: a string. For use only with as: "image". Specifies the source set of the image.
    • imageSizes: a string. For use only with as: "image". Specifies the sizes of the image.

Returns ​

preload returns nothing.

Caveats ​

  • Multiple equivalent calls to preload have the same effect as a single call. Calls to preload are considered equivalent according to the following rules:
    • Two calls are equivalent if they have the same href, except:
    • If as is set to image, two calls are equivalent if they have the same href, imageSrcSet, and imageSizes.
  • In the browser, you can call preload 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, preload 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 preload when rendering a component if you know that it or its children will use a specific resource.

Preloading an external script ​

import { preload } from 'react-dom';

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

If you want the browser to start executing the script immediately (rather than just downloading it), use preinit instead. If you want to load an ESM module, use preloadModule.

Preloading a stylesheet ​

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/style.css", {as: "style"});
  return ...;
}

If you want the stylesheet to be inserted into the document immediately (which means the browser will start parsing it immediately rather than just downloading it), use preinit instead.

Preloading a font ​

import { preload } from 'react-dom';

function AppRoot() {
  preload("https://example.com/style.css", {as: "style"});
  preload("https://example.com/font.woff2", {as: "font"});
  return ...;
}

If you preload a stylesheet, it's smart to also preload any fonts that the stylesheet refers to. That way, the browser can start downloading the font before it's downloaded and parsed the stylesheet.

Preloading an 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 ...;
}

When preloading an image, the imageSrcSet and imageSizes options help the browser fetch the correctly sized image for the size of the screen.

Preloading in an event handler ​

Call preload in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.

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>
  );
}