When to Use and When to Avoid Using React Helmet

React Helmet is a small library that helps to manage the document head. In this article we will see how to add React Helmet to a project and how to use it. We will learn when React Helmet may improve React applications and when it's not an optimal way in React.

 is a library that helps to manage the document head in React applications. We can use it to change the page title, language, and meta-information.

 object. However, it is not an optimal solution as we need to use React component's lifecycle to add a code to do that. React Helmet provides an easy way to manage the document head information.

For this article, we assume that you're familiar with React components basics, such as working with component's properties.

If you're just getting started with React, you may want to look at the 

 for a more structured and detailed course.

You would also need a basic knowledge about the HTML 

Let's start by adding React Helmet to a project:

# add with npm
npm install react-helmet
# or with yarn
yarn add react-helmet

Now, we can use React Helmet to declare changes to the document head.

The following example sets the page title, language, and description.

import React from "react";
import "./styles.css";

import { Helmet } from "react-helmet";

export default function App() {
  return (
    <div>
      <Helmet htmlAttributes>
        <html lang="en" />
        <title>Hello from React Helmet</title>
        <meta name="description" content="Basic example" />
      </Helmet>
      
      <div className="App">
        <h1>React Helmet Basic Example</h1>
      </div>
    </div>
  );
}

 component. Next, we use it to declare tags we want inside the head.

 component will move these elements to the document head.

 elements as children. We can also set attributes for 

 component is available on the official site.

Let's look at a couple of scenarios where using React Helmet may come in handy.

Setting Page Title in Single Page Applications

Single page application (SPA) is a common way to implement React applications. With SPAs, we've got a single physical page. We create an effect of transition between different pages by loading different components into the page.

The title and other meta-information help users to navigate an application. They also help search engines, such as Google, to parse different areas of SPA application.

For example, here's how we can change the page title when switching between pages:

import React from "react";

import { Helmet } from "react-helmet";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

const Page1 = () => (
  <div>
    <Helmet>
      <title>Page 1</title>
    </Helmet>
    <h1>This is Page 1</h1>
    <Link to="/page2">go to Page 2</Link>
  </div>
);

const Page2 = () => (
  <div>
    <Helmet>
      <title>Page 2</title>
    </Helmet>
    <h1>This is Page 2</h1>
    <Link to="/">go to Page 1</Link>
  </div>
);

export default function App() {
  return (
    <div>
      <BrowserRouter>
        <Switch>
          <Route exact path="/">
            <Page1 />
          </Route>
          <Route path="/page2">
            <Page2 />
          </Route>
        </Switch>
      </BrowserRouter>
    </div>
  );
}

We've got two components for pages called 

 for switching between two pages. Each page has got the 

 component that changes the title when a page loads.

We can use React Helmet in internationalization scenarios to specify the language of our HTML document. This can be useful when users can select the preferred language. The selected language is used by screen readers and search engines. We can specify the language with the 

We can use React Helmet with server-side rendering to specify page metadata depending on a path. The server-side rendering is out of scope for this article. To learn about using React Helmet on a server you may check out the 

If you're planning to use React Helmet for server-side rendering and you're using asynchronous operations to process requests, consider using 

his is a fork of the React Helmet which provides asynchronous operations support. This package provides better performance and allows to avoid problems with asynchronous requests' processing on the server.

There are some scenarios where you may use React Helmet, but more suitable solutions available in React.

We can use React Helmet to add CSS styles to our application. We can load external CSS files with 

 element and declare inline page styles with 

 element. However, there are better ways to do that in React. The drawback of React Helmet for loading CSS is that it's hard to maintain a connection between a component and its styles.

If we need to load a CSS file for an application, we can define a static 

 element. If we need to load a CSS file only for specific components, we may consider 

. For dynamic styling, we can use inline styling or additional libraries such as 

For more information about dynamic styling in React, you may check out the 

How and When to Use Inline Styling in React

CSS in JS - Traditionalist sentiments put to the test

 tags to load JavaScript files. The problem with that approach is that it's hard to control when a particular script got loaded. Errors during loading are hard to process as well.

For dynamically loading JavaScript files we may use the 

React Helmet is a small library that helps to manage the document head. It works in a browser and supports rendering on a server. We can use React Helmet to dynamically set the page title, language, and metadata.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">When to Use and When to Avoid Using React Helmet</h1><div data-node-type="summary" class="summary-block">React Helmet is a small library that helps to manage the document head. In this article we will see how to add React Helmet to a project and how to use it. We will learn when React Helmet may improve React applications and when it's not an optimal way in React.</div><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200323110204888_react-helmet.jpg" attachmentid="23d4d5f0-0a4c-4157-b754-2e969c6477df" contenteditable="false" data-width="450" data-height="390"><div></div></figure><p><a href="https://github.com/nfl/react-helmet#readme" rel="noopener noreferrer nofollow">React Helmet</a> is a library that helps to manage the document head in React applications. We can use it to change the page title, language, and meta-information.</p><p>We can work with page <code>&lt;html&gt;</code> and <code>&lt;head&gt;</code> elements using the <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document" rel="noopener noreferrer nofollow">document</a></code> object. However, it is not an optimal solution as we need to use React component's lifecycle to add a code to do that. React Helmet provides an easy way to manage the document head information.</p><p>For this article, we assume that you're familiar with React components basics, such as working with component's properties.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>If you're just getting started with React, you may want to look at the <a href="https://reactjs.org/docs/getting-started.html" rel="noopener noreferrer nofollow">React Getting Started</a> for a jump-start or check out <a href="https://www.newline.co/fullstack-react/30-days-of-react/" rel="noopener noreferrer nofollow">30 Days of React</a> for a more structured and detailed course.</p></div></div><p>You would also need a basic knowledge about the HTML <code>&lt;head&gt;</code> element.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>You can learn more about the <code>&lt;head&gt;</code> element from this <a href="https://www.w3schools.com/html/html_head.asp" rel="noopener noreferrer nofollow">HTML Head</a> article.</p></div></div><h2><a name="adding-react-helmet-to-project">Adding React Helmet to Project</a></h2><p>Let's start by adding React Helmet to a project:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-VNcCD" id="cm-VNcCD"># add with npm
npm install react-helmet
# or with yarn
yarn add react-helmet</textarea><h2><a name="using-react-helmet">Using React Helmet</a></h2><p>Now, we can use React Helmet to declare changes to the document head.</p><p>The following example sets the page title, language, and description.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-R21uy" id="cm-R21uy">import React from "react";
import "./styles.css";

import { Helmet } from "react-helmet";

export default function App() {
  return (
    &lt;div&gt;
      &lt;Helmet htmlAttributes&gt;
        &lt;html lang="en" /&gt;
        &lt;title&gt;Hello from React Helmet&lt;/title&gt;
        &lt;meta name="description" content="Basic example" /&gt;
      &lt;/Helmet&gt;
      
      &lt;div className="App"&gt;
        &lt;h1&gt;React Helmet Basic Example&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}</textarea><figure class="photo figure-position-inline"><a href="https://codesandbox.io/s/react-helmet-basic-example-uvt8b?fontsize=14&amp;hidenavigation=1&amp;theme=dark" contenteditable="true"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20200323105348130_play-codesandbox.svg" attachmentid="7f5d9fd1-0915-46ba-9f4f-f68d9090fbce" contenteditable="false" data-width="201" data-height="42"></a><div></div></figure><p>We start by importing the <code>Helmet</code> component. Next, we use it to declare tags we want inside the head.</p><p>We put elements inside the <code>Helmet</code> component. We specify the <code>&lt;title&gt;</code> element for the page title, the <code>&lt;meta&gt;</code> element with <code>name="description"</code> for the description, and the <code>&lt;html&gt;</code> element to define the <code>lang</code> attribute. The <code>Helmet</code> component will move these elements to the document head.</p><p>The <code>Helmet</code> component supports <code>title</code>, <code>base</code>, <code>meta</code>, <code>link</code>, <code>script</code>, <code>noscript</code>, and <code>style</code> elements as children. We can also set attributes for <code>body</code> and <code>html</code> tags.</p><p>Description of <a href="https://www.npmjs.com/package/react-helmet#reference-guide" rel="noopener noreferrer nofollow">all available properties</a> of the <code>Helmet</code> component is available on the official site.</p><h2><a name="when-to-use-react-helmet">When to Use React Helmet</a></h2><p>Let's look at a couple of scenarios where using React Helmet may come in handy.</p><h3><a name="setting-page-title-in-single-page-applications">Setting Page Title in Single Page Applications</a></h3><p>Single page application (SPA) is a common way to implement React applications. With SPAs, we've got a single physical page. We create an effect of transition between different pages by loading different components into the page.</p><p>The title and other meta-information help users to navigate an application. They also help search engines, such as Google, to parse different areas of SPA application.</p><p>For example, here's how we can change the page title when switching between pages:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-lB3IY" id="cm-lB3IY">import React from "react";

import { Helmet } from "react-helmet";
import { BrowserRouter, Switch, Route, Link } from "react-router-dom";

const Page1 = () =&gt; (
  &lt;div&gt;
    &lt;Helmet&gt;
      &lt;title&gt;Page 1&lt;/title&gt;
    &lt;/Helmet&gt;
    &lt;h1&gt;This is Page 1&lt;/h1&gt;
    &lt;Link to="/page2"&gt;go to Page 2&lt;/Link&gt;
  &lt;/div&gt;
);

const Page2 = () =&gt; (
  &lt;div&gt;
    &lt;Helmet&gt;
      &lt;title&gt;Page 2&lt;/title&gt;
    &lt;/Helmet&gt;
    &lt;h1&gt;This is Page 2&lt;/h1&gt;
    &lt;Link to="/"&gt;go to Page 1&lt;/Link&gt;
  &lt;/div&gt;
);

export default function App() {
  return (
    &lt;div&gt;
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/"&gt;
            &lt;Page1 /&gt;
          &lt;/Route&gt;
          &lt;Route path="/page2"&gt;
            &lt;Page2 /&gt;
          &lt;/Route&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
    &lt;/div&gt;
  );
}</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fs75wj&amp;display_name=CodeSandbox&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fs75wj&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fs75wj%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We've got two components for pages called <code>Page1</code> and <code>Page2</code>.</p><p>We're using the <code><a href="https://reacttraining.com/react-router/web/guides/quick-start" rel="noopener noreferrer nofollow">react-router-dom</a></code> for switching between two pages. Each page has got the <code>Helmet</code> component that changes the title when a page loads.</p><h3><a name="specifying-language-of-html-document">Specifying Language of HTML Document</a></h3><p>We can use React Helmet in internationalization scenarios to specify the language of our HTML document. This can be useful when users can select the preferred language. The selected language is used by screen readers and search engines. We can specify the language with the <code>lang</code> attribute of the <code>&lt;html&gt;</code> element.</p><h3><a name="setting-page-metadata-on-server">Setting Page Metadata On Server</a></h3><p>We can use React Helmet with server-side rendering to specify page metadata depending on a path. The server-side rendering is out of scope for this article. To learn about using React Helmet on a server you may check out the <a href="https://github.com/nfl/react-helmet#server-usage" rel="noopener noreferrer nofollow">using React Helmet on server</a> documentation.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>If you're planning to use React Helmet for server-side rendering and you're using asynchronous operations to process requests, consider using <a href="https://www.npmjs.com/package/react-helmet-async" rel="noopener noreferrer nofollow">react-helmet-async</a> package instead. </p><p>his is a fork of the React Helmet which provides asynchronous operations support. This package provides better performance and allows to avoid problems with asynchronous requests' processing on the server.</p></div></div><h2><a name="when-to-avoid-using-react-helmet">When to Avoid Using React Helmet</a></h2><p>There are some scenarios where you may use React Helmet, but more suitable solutions available in React.</p><h3><a name="declaring-css-styles">Declaring CSS Styles</a></h3><p>We can use React Helmet to add CSS styles to our application. We can load external CSS files with <code>&lt;link&gt;</code> element and declare inline page styles with <code>&lt;style&gt;</code> element. However, there are better ways to do that in React. The drawback of React Helmet for loading CSS is that it's hard to maintain a connection between a component and its styles.</p><p>If we need to load a CSS file for an application, we can define a static <code>&lt;link&gt;</code> element. If we need to load a CSS file only for specific components, we may consider <a href="https://create-react-app.dev/docs/code-splitting" rel="noopener noreferrer nofollow">code splitting</a>. For dynamic styling, we can use inline styling or additional libraries such as <a href="https://styled-components.com/" rel="noopener noreferrer nofollow">styled-components</a> or <a href="https://emotion.sh/docs/globals" rel="noopener noreferrer nofollow">emotion</a>.</p><div data-panel-type="tip" data-panel-position="inline" class="panel panel-type-tip panel-position-inline"><div class="panel-container lolwut"><p>For more information about dynamic styling in React, you may check out the <a href="https://www.newline.co/@dmitryrogozhny/how-and-when-to-use-inline-styling-in-react--a1158ecf" rel="noopener noreferrer nofollow">How and When to Use Inline Styling in React</a> and <a href="https://www.newline.co/@lindsayjopson/css-in-js-traditionalist-sentiments-put-to-the-test--dc15eb74" rel="noopener noreferrer nofollow">CSS in JS - Traditionalist sentiments put to the test</a> articles.</p></div></div><h2><a name="loading-javascript-files">Loading JavaScript Files</a></h2><p>With React Helmet we can declare <code>script</code> tags to load JavaScript files. The problem with that approach is that it's hard to control when a particular script got loaded. Errors during loading are hard to process as well.</p><p>For dynamically loading JavaScript files we may use the <a href="https://reactjs.org/docs/code-splitting.html" rel="noopener noreferrer nofollow">Code Splitting</a> and <a href="https://reactjs.org/docs/code-splitting.html#reactlazy" rel="noopener noreferrer nofollow">React.lazy</a>. For server-side rendering, we may use <a href="https://loadable-components.com/" rel="noopener noreferrer nofollow">Loadable Components</a>.</p><h2><a name="conclusion">Conclusion</a></h2><p>React Helmet is a small library that helps to manage the document head. It works in a browser and supports rendering on a server. We can use React Helmet to dynamically set the page title, language, and metadata.</p><h2><a name="more-resources">More Resources</a></h2><ul><li><p><a href="https://github.com/nfl/react-helmet#server-usage" rel="noopener noreferrer nofollow">React Helmet</a>.</p></li><li><p><a href="https://www.npmjs.com/package/react-helmet-async" rel="noopener noreferrer nofollow">React-helmet-async</a> for server-side rendering.</p></li><li><p><a href="https://reactjs.org/docs/code-splitting.html" rel="noopener noreferrer nofollow">Code Splitting</a> and <a href="https://reactjs.org/docs/code-splitting.html#reactlazy" rel="noopener noreferrer nofollow">React.lazy</a> for dynamic components loading.</p></li></ul>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

When to Use and When to Avoid Using React Helmet

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript