What is the purpose of react-helmet?

Reactjs Problem Overview

I've created a server-side react app, where it would return html as shown below:

const html = renderToString(<App />);
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>A Cool Page</title>
    <link rel="stylesheet" href="${ROOT}/static/index.css">
  </head>
  <body>
    <div id="root">${html}</div>
    <script src="${ROOT}/client-bundle.js"></script>
  </body>
</html>

I read a lot of people have been using react-helmet to manage the content in head. I'm wondering what's the benefit of using it, when I can just directly include as shown above.

Reactjs Solutions

Solution 1 - Reactjs

A major benefit or react-helmet is when you have multiple components in a tree with <head> tags, and you have <meta> tags with the same attributes/values.

For instance, if on your index page component you have:

const html = renderToString(); A Cool Index Page

But then on a leaf page component, you also have a <head> tag containing meta tags:

A Cool Leaf Page

Notice between our two page components there are two meta tags with the same attribute value name="description" in our tree. You might think this could lead to duplication, but react-helmet takes care of this problem.

If someone ends up on the leaf page, react-helmet overrides the index/site-level description meta tag and renders the lower-level one, the one specifically for the leaf page.

It will also contain the viewport meta tag, since it did not have to be overwritten.

Because of react-helmet, on the leaf page, the <head> would appear as follows:

A Cool Leaf Page

Solution 2 - Reactjs

react-helmet allows to set meta tags that will be read by search engines and social media crawlers. This makes server-side rendering and React Helmet a dynamic duo for creating apps that are SEO and social media friendly.

eg:

import { Helmet } from 'react-helmet';

<Helmet>
    <title>Turbo Todo</title>
    <meta name="description" content="test on react-helmet" />
    <meta name="theme-color" content="#ccc" />
</Helmet>

Solution 3 - Reactjs

Both methods should work. But with react-helmet, the head is also treated as a component and is more react-like. Also, although it's unusual, you may bind some props or states with the meta-data to implement a dynamic head. One scenario is switching between different languages.

Solution 4 - Reactjs

React Helmet also allow you to modify classes outside the scope of your render function.

For example, if you want to modify your <body> tag dynamically, you could do the following:

<Helmet>
    <body className="dynamic-class-for-body-on-this-view" />
</Helmet>

Solution 5 - Reactjs

React Helmet is a reusable React component that will manage all of your changes to the document head.

For example, if you want to change the title and meta description of every page according to your SEO, you could do the following:

<Helmet>
    <title>Your Title</title>
    <meta name="description" content="Description of your page" />
</Helmet>

Content Type	Original Author	Original Content on Stackoverflow
Question	PBandJen	View Question on Stackoverflow
Solution 1 - Reactjs	Lexis Hanson	View Answer on Stackoverflow
Solution 2 - Reactjs	Sajin M Aboobakkar	View Answer on Stackoverflow
Solution 3 - Reactjs	Van	View Answer on Stackoverflow
Solution 4 - Reactjs	Alberto Ruiz	View Answer on Stackoverflow
Solution 5 - Reactjs	Raghav Jindal	View Answer on Stackoverflow