--- title: Migrating from React Helmet to Unhead description: 'Replace React Helmet with Unhead. Smaller bundle size (4.5kb gzipped), TypeScript support, and modern features.' navigation: title: 'Migrate React Helmet' --- **Quick Answer:** Replace `` with `useHead()` or `` components. Most props map directly - just change the import to `@unhead/react`. ## Why Migrate from React Helmet? [React Helmet](https://github.com/nfl/react-helmet) was the go-to solution for managing `` tags in React applications for years. However, its last major release was in 2020 and the project is now in maintenance mode. Outside of regular maintenance [Unhead](/) offers a modern alternative with: - Full TypeScript safety - DOM event handlers - Advanced DOM patching algorithm built for reactive frameworks - Ecosystem of extras: `useSchemaOrg()`{lang="ts"}, `useScript()`{lang="ts"}, and more - Intelligent tag sorting for improved performance As well as a improved bundle size: - REACT HELMET Size: 26.6 kB (gzipped: 9.2 kB) - UNHEAD Size: 10.7 kB (gzipped: 4.5 kB) ## What's the Difference Between React Helmet and Unhead? React Helmet uses a `` component to manage head tags. Unhead provides a `` component, offering a similar API. ```tsx [React Helmet] import { Helmet } from 'react-helmet' function App() { return ( My Site ) } ``` ```tsx [Unhead] import { Head } from '@unhead/react' function App() { return ( My Site ) } ``` ## How Do I Migrate from React Helmet to Unhead? ### 1. Update Dependencies Remove React Helmet and install Unhead: ```bash npm remove react-helmet npm install @unhead/react ``` ### 2. Add the Provider Unlike React Helmet, Unhead uses a provider, providing a safer context for managing head tags. Add it to your app's entry point: ```tsx [src/entry-client.tsx] import { createHead, UnheadProvider } from '@unhead/react/client' const head = createHead() function App() { return ( ) } ``` ### 3. Replace Components Replace all instances of `` with ``. ```diff -import { Helmet } from 'react-helmet' +import { Head } from '@unhead/react' function Title() { return (

- - Hello World - + + Hello World +

Hello World

) } ``` There are some nuanced differences to be aware of: - `defaultTitle` is not supported - `onChangeClientState` is not supported ### 4. Update Server Rendering If you're using SSR, update your server code: ```tsx [src/entry-server.tsx] import { createHead, UnheadProvider } from '@unhead/react/server' import { StrictMode } from 'react' import { renderToString } from 'react-dom/server' import App from './App' export function render(_url: string) { const head = createHead() const html = renderToString( , ) return { html, head } } ``` ### 5. What's Next? You've successfully migrated from React Helmet to Unhead. Check out some of the Unhead concepts: - [Tag Placement](/docs/head/guides/core-concepts/positions) - [DOM Event Handling](/docs/head/guides/core-concepts/dom-event-handling) - [Handling Duplicates](/docs/head/guides/core-concepts/handling-duplicates) ## Need Help? If you run into issues during migration: - File an issue on [GitHub](https://github.com/unjs/unhead) - Join our [Discord community](https://discord.gg/unjs)