How do you set the document title in React?

javascript

react

hooks

lifecycle-methods

byAlex Kataev·Jan 6, 2025

Here's a quick way to set the document title in a React functional component using useEffect:

useEffect(() => {
  document.title = 'Hello, StackOverflow!';
}, []);

This piece of code runs on mount, hence setting the title right after the component is loaded and does not rerun on subsequent component updates.

Upgrading your game with React Helmet

Though you can directly update document.title, there's an even better, declarative way using React Helmet. You'll be wrapping your title within a Helmet component giving it a clear and well-structured syntax.

import { Helmet } from "react-helmet";

const MyComponent = () => (
  <>
    <Helmet>
      <title>No more head(ache) with Helmet</title> {/* No more document.title, yay!*/}
    </Helmet>
    {/* Your component logic */}
  </>
);

React Helmet is a superhero in situations where the title needs to change based on dynamic data.

Back to the classics: class components

Lest we forget, those still on the class component ride or using pre-hooks React, the componentDidMount lifecycle method comes to rescue:

componentDidMount() {
  document.title = 'What are hooks, anyway?'; // Said every class component ever
}

This method brings into play a metal shovel for the title grave, enabling the setting of the title after the component has mounted.

Making life easier with custom hooks

Abstracting document title logic into a custom hook, useTitle, makes a developer's life easier (and longer).

function useTitle(title) {
  useEffect(() => {
    document.title = title; // This title won't set itself, huh?
  }, [title]); // We'll need this if our title is as unpredictable as JavaScript types
}

Now, just call useTitle in your component, and your title is automatically updated.

const MyComponent = () => {
  useTitle('Easy peasy lemon squeezy!');
  // Component logic...
};

Shapeshifting titles and environment switches

Got a document title that's supposed to be as vibrant and unpredictable as a chameleon in a Skittles bag?

useEffect(() => {
  const titlePrefix = process.env.REACT_APP_TITLE_PREFIX; // I wonder who names these variables
  document.title = titlePrefix 
    ? `${titlePrefix} - I love chameleons` 
    : 'Fallback Title'; // Who needs meaningful titles anyway?
}, []); // Add dependencies if the title should be as dynamic as a magic show

If you're working with webpack-dev-server, ensure you have inline set to true for rapid hot reloading and undeniable bragging rights.

Checkpoints for consistency and long-term happiness

Taming document.title can be troublesome without lifecycle methods or hooks. Let's go over several aspects to ensure stable updates:

The good ol' React Helmet for a more declarative and maintainable approach.
Make a custom hook for fun, profit, and effortless reuse across components.
Keep a keen eye on the useEffect dependency array. Because nobody likes unnecessary reruns.
If in doubt, embrace React Router's integration with useEffect or React Helmet.