Stylesheets, Async Scripts and Resource Preloading

Stylesheets as components

React 19 lets you declare a stylesheet where it is used, and handles ordering and deduplication.

function ProductCard({ product }) {
  return (
    <>
      <link rel="stylesheet" href="/styles/card.css" precedence="default" />
      <div className="card">{product.name}</div>
    </>
  );
}

React hoists it into the head, loads it once no matter how many components declare it, and waits for it to load before showing the content. No flash of unstyled text.

Precedence controls order

CSS order decides which rules win, so React needs to know how to sort the stylesheets it hoists.

<link rel="stylesheet" href="/reset.css" precedence="reset" />
<link rel="stylesheet" href="/base.css" precedence="default" />
<link rel="stylesheet" href="/overrides.css" precedence="high" />

React keeps them in the order the precedence values first appear. Pick a small set of names such as reset, default and high, and use them consistently.

<link rel="stylesheet" href="/styles/card.css" />

Without precedence, React leaves it alone and treats it as a plain element.

Async scripts

function Analytics() {
  return (
    <>
      <script async src="https://example.com/analytics.js" />
      <div>Page content</div>
    </>
  );
}

An async script gets hoisted and deduplicated too. Render Analytics in five places and the script loads once.

Only async scripts are handled this way. A blocking script is left where you put it.

Preloading

Four functions from react-dom let you start work before it is needed.

import { preload, preinit, prefetchDNS, preconnect } from 'react-dom';

preload

Download a resource now, use it later.

function ProductPage({ product }) {
  preload(product.heroImage, { as: 'image' });
  preload('/fonts/heading.woff2', { as: 'font', type: 'font/woff2', crossOrigin: 'anonymous' });
  return <div>...</div>;
}

Fonts are the classic case. A font referenced only from a CSS file is not discovered until the CSS has been parsed, which delays it badly. Preloading starts it immediately.

preinit

Download and execute a script, or download and apply a stylesheet.

function Checkout() {
  preinit('https://js.stripe.com/v3/', { as: 'script' });
  return <div>...</div>;
}

Use preinit when you know you will need it. Use preload when you might.

prefetchDNS and preconnect

prefetchDNS('https://api.example.com');
preconnect('https://cdn.example.com');

prefetchDNS resolves the domain name early. preconnect goes further and opens the TCP and TLS connection.

Connecting to a new origin costs a few hundred milliseconds on a mobile network, so doing it in advance is a real saving. Use preconnect for a handful of critical origins only, since each open connection has a cost.

Preloading on interaction

function ProductLink({ product }) {
  function handleHover() {
    preload(product.image, { as: 'image' });
    preload(`/api/products/${product.id}`, { as: 'fetch' });
  }
  return (
    <Link to={`/products/${product.id}`} onMouseEnter={handleHover}>
      {product.name}
    </Link>
  );
}

Hovering usually precedes clicking by a few hundred milliseconds. Starting the work on hover makes the navigation feel instant.

Where to call them

These are not hooks, so there is no dependency array and no rules to follow. Call them during render, in an event handler, or at module scope.

preconnect('https://api.example.com');
function App() {
  return <div>...</div>;
}

Module scope is good for connections you always need. Calling them repeatedly is safe, because React deduplicates.

Do not overdo it

Preloading is a hint about priority, not free speed. The network has finite bandwidth.

products.forEach((p) => preload(p.image, { as: 'image' }));

Preloading fifty images makes the important ones slower, because they compete. Preload the few things that block the first meaningful paint: the hero image, the main font, one critical script. Let everything else load normally.

Also note the browser console will warn about a preloaded resource that goes unused within a few seconds, which is a useful check on whether you actually needed it.

Lazy loading images

Often the better default is the opposite.

<img src={product.image} alt={product.name} loading="lazy" width={400} height={300} />

loading="lazy" skips images that are off screen entirely. Always set width and height so the space is reserved and the layout does not shift.

Preload what is above the fold, lazy load everything else.

Quick recap

• <link rel="stylesheet" precedence> is hoisted, deduplicated and awaited.
• Precedence names decide the order in which stylesheets are applied.
• Async scripts are hoisted and deduplicated the same way.
• preload downloads early, preinit downloads and runs.
• prefetchDNS and preconnect warm up connections to other origins.
• Preloading on hover makes navigation feel instant.
• These are not hooks, so call them anywhere and as often as you like.
• Preload only what blocks first paint, and lazy load the rest.