preloading-resources

Reduce initial load latency by preloading critical resources using React 19's prefetchDNS, preconnect, preload, and preinit functions. These APIs establish early network connections and fetch assets before they're needed, improving perceived performance on app load and navigation.

prefetchDNS resolves domain names early; preconnect establishes TCP connections; preload fetches resources without executing them; preinit fetches and executes critical assets. Choose based on resource type and timing: fonts and images use preload, scripts use preinit, and DNS and connections use their respective functions.

Call preload from react-dom with resource attributes like as, type, and crossOrigin. Specify as="font" for fonts or as="image" for images, include the href, and optionally set precedence to control execution order. Execute before component render to ensure resources fetch early.

Yes. Trigger preloading on route hover or navigation intent using prefetchDNS, preconnect, preload, or preinit before the route loads. This reduces perceived latency when users navigate between pages by fetching critical assets in advance.

Use href for the resource URL, as to declare resource type (font, image, script, style), type for MIME type, and crossOrigin for cross-origin resources. Optional precedence controls scheduling priority. Combine these attributes with prefetchDNS, preconnect, preload, or preinit functions.

Yes. Resource preloading APIs—prefetchDNS, preconnect, preload, and preinit—are React 19 features available through react-dom. Earlier React versions do not expose these APIs natively.