{"id":11716,"library":"react-helmet","title":"React Helmet","description":"React Helmet is a versatile React component designed to manage and manipulate the document head (``) of web pages. It enables developers to declaratively define metadata like titles, meta tags, link tags, script tags, and more directly within their component tree. The current stable version is 6.1.0, which re-introduced the default export pattern alongside the named export. While there's no strict release cadence, the project is actively maintained with updates addressing compatibility and feature enhancements. A key differentiator is its straightforward API that accepts plain HTML tags and its ability to handle server-side rendering, ensuring that the correct head elements are generated for initial page loads. It automatically handles nested components, where later or deeper components override duplicate head changes, simplifying SEO and page-specific metadata management.","status":"active","version":"6.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/nfl/react-helmet","tags":["javascript","react-helmet","nfl","react","document","head","title","meta","link"],"install":[{"cmd":"npm install react-helmet","lang":"bash","label":"npm"},{"cmd":"yarn add react-helmet","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-helmet","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for all React-based projects.","package":"react","optional":false}],"imports":[{"note":"As of v6.1.0, both default and named exports for Helmet are available. Prior to v6.1.0 (specifically v6.0.0), only named export was supported.","wrong":"import { Helmet } from 'react-helmet'","symbol":"Helmet","correct":"import Helmet from 'react-helmet'"},{"note":"This named export pattern works for v6.0.0 and later versions, including the current v6.1.0. For v6.0.0, this was the *only* correct way to import Helmet.","wrong":"import Helmet from 'react-helmet'","symbol":"Helmet (named)","correct":"import { Helmet } from 'react-helmet'"},{"note":"Used for server-side rendering to extract head data after components have rendered to string. Must be called after `ReactDOMServer.renderToString`.","wrong":"const helmet = Helmet.renderStatic(); // without calling ReactDOMServer.renderToString first","symbol":"Helmet.renderStatic","correct":"import { Helmet } from 'react-helmet'; /* ... renderToString ... */ const helmet = Helmet.renderStatic();"}],"quickstart":{"code":"import React from \"react\";\nimport { Helmet } from \"react-helmet\";\n\nfunction MyPage() {\n return (\n
\n );\n}\n\nexport default MyPage;\n","lang":"typescript","description":"Demonstrates basic usage of React Helmet to set document head tags like `meta`, `title`, and `link` within a functional React component."},"warnings":[{"fix":"For v6.0.0, always use `import { Helmet } from 'react-helmet'`. For v6.1.0 and later, both named and default imports are supported.","message":"Version 6.0.0 removed the default export for Helmet, requiring a named import `import { Helmet } from 'react-helmet'`. This was re-introduced in v6.1.0, allowing `import Helmet from 'react-helmet'` again, but users on exactly v6.0.0 will encounter issues with default imports.","severity":"breaking","affected_versions":"==6.0.0"},{"fix":"Ensure `Helmet.renderStatic()` is explicitly called after rendering your React application to a string on the server to clear Helmet's internal state for each request.","message":"When performing server-side rendering (SSR), it is crucial to call `Helmet.renderStatic()` after `ReactDOMServer.renderToString` or `ReactDOMServer.renderToStaticMarkup`. Failure to do so will result in a memory leak on the server as Helmet keeps track of mounted instances.","severity":"gotcha","affected_versions":">=5.0.0"},{"fix":"Migrate to the new API by passing plain HTML tags (e.g., ``, `<meta>`) as children to the `<Helmet>` component instead of using props. Refer to the README for updated examples.","message":"In v5.0.0, a new simplified API was introduced. Directly passing Helmet props like `titleTemplate`, `defaultTitle`, `onChangeClientState`, and `encodeSpecialCharacters` is still backward-compatible but will be deprecated in future versions. The recommended approach is to use plain HTML tags as children.","severity":"deprecated","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statement to `import { Helmet } from 'react-helmet'`. If you are on `6.1.0` or later, both default and named imports are supported, so check your package version.","cause":"Attempting to use `import Helmet from 'react-helmet'` when on `react-helmet@6.0.0`, which only supported named exports.","error":"TypeError: (0, react_helmet_1.default) is not a function"},{"fix":"After rendering your React application to a string, add `const helmet = Helmet.renderStatic();` to clear Helmet's state and prevent memory accumulation across requests.","cause":"The `Helmet.renderStatic()` method was not called after `ReactDOMServer.renderToString` or `ReactDOMServer.renderToStaticMarkup` on the server.","error":"Memory leak reported in server-side rendering environment."},{"fix":"Refactor your Helmet usage to pass plain HTML tags as children. For example, instead of a `titleTemplate` prop, define the full `<title>` tag content directly.","cause":"You are passing props like `titleTemplate` directly to the Helmet component, which is part of the older API that will be deprecated.","error":"Warning: Using deprecated Helmet API. Consider migrating to the new API."}],"ecosystem":"npm"}