Intermediate LevelReact JS & React 19
How do React 19 resource loading APIs (preload, preinit, prefetchDNS) optimize page performance?
❓ Interview Prompt: Explain React 19 Resource Hints (`preload`, `preinit`, `preconnect`, `prefetchDNS`), elevating head tags, and critical rendering path optimization.
React 19 introduces native Resource Loading APIs ('preload', 'preinit', 'preconnect', 'prefetchDNS') exported from 'react-dom':
How They Work:
When called anywhere in your component tree, React automatically elevates the resource hints directly into the document '<head>', discoverable before browser DOM parsing finishes!
Code Implementation Example
jsx
import { preload, preinit } from 'react-dom';
function ArticlePage() {
// Preload high-priority font asset
preload('/fonts/inter.woff2', { as: 'font', type: 'font/woff2' });
// Preinit external script resource
preinit('https://example.com/analytics.js', { as: 'script' });
return <article>Article Content</article>;
}💡Preloading fonts and external scripts using React 19 resource APIs.
🎯 Interview Key Takeaway
React 19 resource loading APIs automatically elevate asset hints to the document <head> to optimize Critical Rendering Path.
#React 19#preload#preinit#Performance#Intermediate
Back to all React JS & React 19 Questions→