Q50: How does React 19 optimize asset loading with preloading APIs (preload, preconnect)?
React 19 introduces native asset loading APIs (preload, preconnect, prefetchDNS) that hoist resource loading declarations to the document <head> dynamically. This starts downloading fonts, scripts, and stylesheets early before components render.
React 19 Resource Preloading APIs
import { preload, preconnect } from 'react-dom';
function FontWrapper() {
// Hoists preconnect & preload to document head automatically
preconnect('https://fonts.cdn.com');
preload('https://fonts.cdn.com/font.woff2', { as: 'font', type: 'font/woff2' });
return <h1>Optimized Typography</h1>;
}💡 React hoists resource preloading calls directly to document head, fetching assets early.
Key Takeaways
- Hoists resource loading declarations to document
<head>automatically. - Reduces visual layout shifts and resource waterfall delays.
Knowledge Check
What does calling preload('font.woff2', { as: 'font' }) inside a React 19 component do?