Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 19.7 — Document Metadata and Resource Loading
React · Example 2 of 2 React 19+

Stylesheets, async scripts and resource hints

Rendered twice, yet the script ran once and each link appears once. Stylesheets come first, grouped by precedence (default was seen first, then high), each with data-precedence. The resource hints follow. The cdn.example.com URLs are placeholders: nothing is fetched from them here.

In React 19 any component can render <title>, <meta> and <link> and React places them in the document <head>; stylesheets with a precedence and async scripts are inserted once in the right order, and preload, preinit, preconnect and prefetchDNS from react-dom tell the browser early about resources it will need.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 5 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Write a ProductPage that sets the title to <name> | Shop and a description meta tag.

02

In a MapView component, preconnect to https://tiles.example.com and preinit its stylesheet https://tiles.example.com/map.css with precedence default.

Explain it without notes

01

How do you set the page title per page in React 19, and how does it work?

02

What does the precedence prop on a stylesheet do?

03

Explain the difference between prefetchDNS, preconnect, preload and preinit.

Stylesheets, async scripts and resource hints React 19+

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

widget script ran
<link rel="stylesheet" href="data:text/css,p{color:teal}" data-precedence="default">
<link rel="stylesheet" href="data:text/css,h1{color:purple}" data-precedence="high">
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://img.example.com">
<link rel="preload" href="https://cdn.example.com/font.woff2" as="font" crossorigin="" type="font/woff2">
<link rel="preload" as="style" href="data:text/css,h1{color:purple}">
<script async="" src="data:text/javascript,console.log('widget script ran')"></script>
h1 color: rgb(128, 0, 128)
p color: rgb(0, 128, 128)