Support for Document MetaData
Learn how React 19 allows us to declaratively manage document metadata directly in our component tree, without external libraries.
In traditional web apps, metadata such as the page title, description, and Open Graph tags live in the HTML <head>
. In React single-page applications (SPAs), these values must be dynamic as the user navigates between different views.
Before React 19, updating metadata in React meant using document.title
or relying on third-party libraries like react-helmet
. These approaches added boilerplate and moved side effects away from the JSX where the UI is defined. React 19 introduces a major shift: we can now declare metadata tags—like <title>
, <meta>
, and <link>
—directly in JSX.
Manual metadata updates
Before React 19, the most common way to change metadata was by manipulating the document inside useEffect
.
Get hands-on with 1400+ tech skills courses.