Components set the title and meta tags
The <title> and <meta> were rendered inside <article> but live in <head>. When the page changes, React updates the same title tag: document.title follows the state.
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.
Write a ProductPage that sets the title to <name> | Shop and a description meta tag.
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
How do you set the page title per page in React 19, and how does it work?
What does the precedence prop on a stylesheet do?
Explain the difference between prefetchDNS, preconnect, preload and preinit.
Preview
Console
Nothing logged yet.Expected console output
title: Home | Hectal
in head: true
meta: About Home
title: Profile | Hectal
titles in doc: 1