Preload on intent

Fetch on hover or focus; hint connections before code needs them.

react.devReact docs

Reference: React DOM Resource Preloading APIs

react-domRead docs ↗

From vercel-react-best-practices: bundle-preload and rendering-resource-hints.

Hover is a free head start

Hover or press each Open editor. Compare the wait.

Chunk 600 ms

Import on clickBad

0 ms

onClick={() => import('./editor')}

Preload on hover/focusGood

0 ms

onMouseEnter={preload} onFocus={preload}

function EditorButton({ onClick }) {
  const preload = () => void import('./monaco-editor') // same promise the click awaits

  return (
    <button onMouseEnter={preload} onFocus={preload} onClick={onClick}>
      Open Editor
    </button>
  )
}

Connect during hydration

Pick a hint, then replay. Raise latency to feel a phone.

No hint prefetchDNS preconnect

Latency 1×

preconnect('https://api.example.com')

Pick the hint by timing

Choose a resource to see what the hint does early.

UseprefetchDNS

URL

Call
Emits

Why it matters

Hover to click takes 150–300 ms. Download then; connect during hydration.

Pros

Hides latency without shrinking a byte.
import() is cached: hover and click share it.
React dedupes hints and hoists them to head.

Cons

Touch has no hover; use pointerdown or visibility.
Unused hints waste bandwidth, sockets and priority.
preconnect without crossOrigin can't serve CORS fetches.