Managing document metadata in React 19

This post's title may seem odd to you, if you're up to date, but a few things have changed from React 18 to 19, and one of them is how you manage document metadata. Before it, you likely had some shenanigans going on, like react-helmet or react-helmet-async in place to dynamically update your document title, inject custom metadata, links, scripts or even styles. Thankfully, with React 19 you'll very likely be able to drop all of that in favor of simplicity and good old HTML.

Managing metadata with react-helmet

If you're still in the Middle Ages (React 18) you might still have react-helmet (or its fork react-helmet-async) installed in your repository, to help you manage your document metadata. Please, don't get me wrong, they're both very popular solutions to an old problem everyone has and had been very reliable in solving it, so far.

import { Helmet } from 'react-helmet';

// Home page
const Home = () => (
  <>
    <Helmet>
      <title>Home | My Website</title>
      <meta name="description" content="Welcome to the home page of My Website." />
    </Helmet>
    <h1>Home Page</h1>
    <p>This is the home page content.</p>
  </>
);

export default Home;

import { Helmet } from 'react-helmet';

// About page
const About = () => (
  <>
    <Helmet>
      <title>About | My Website</title>
      <meta name="description" content="Learn more about us on the about page." />
    </Helmet>
    <h1>About Page</h1>
    <p>This is the about page content.</p>
  </>
);

export default About;

This is what your code might look like if you are using these libraries, but don't stress over it, there's a much simpler solution to this problem.

Managing metadata with React 19

Now, getting out of Plato's Cave, instead of having to install third-party libraries to do that, all you have to do is write plain HTML with the required metadata your page requires.

export default function About() {
  return (
    <>
      <title>Lucas Tonelli's history summary</title>
      <link rel="canonical" href="https://lucastonelli.com/about" />
      <meta
              name="description"
              content="A brief history about my career and who I am personally."
      />
      <main title="About">
        <h1>About</h1>
      </main>
    </>
  );
}

This is what a piece of my CV page looks like. Yup, plain HTML. This is being done entirely by React, and if I were to include more metadata here, such as scripts and styles, I would likely see the same results.

You might be wondering: "Why did he say 'likely'"? That's because there are a few exceptions where metadata won't be put in the document head. For example, if the meta element is provided with the itemProp prop, it will stay where it is, since it doesn't represent metadata about the document, but rather metadata about a specific part of the page.

With that said, go over React documentation and check out all the caveats for this feature. Also, there are several other features there that might pique your interest, so I recommend taking a look at those as well.

Wrap-up

Shifting the paradigm of how we manage document metadata, React 19 has dropped in to simplify it, while making some libraries obsolete along the way. Now, writing plain HTML inside a React component is enough to ensure that your document title, for instance, will end up in the document head. That simplifies the day-to-day life of maintaining frontend projects and gives everyone using it fewer things to worry about.

Blog

Managing document metadata in React 19

Managing metadata with react-helmet

Managing metadata with React 19

Wrap-up