3 ways to set a document title in React

The title is an essential element is any webpage that represents the document's content globally. It maximizes the user experience for those who visit the website. Beyond that, the document title is used in many cases such as the title bar of the browser, bookmarks, stored history, navigation tabs of the browsers, session history, task bar, etc. Most importantly, they provide proper SEO content for the search engines. Having a proper title help boost the organic visitors towards the site improving the overall SEO performance as well.

In this tutorial, we will learn how to set a document title from react class components and hooks. React is one of the most popular library devised for creating powerful web apps. Here, we will learn how to add the document title in three different ways. We will start by simple one and end with a complex one.

So, let's get started!

1. Add document title in a class components

In a class component, we can add the document title by using the componentDidMount() lifecycle hook method. This lifecycle hook method executes right after the component is mounted to the DOM. By simply assessing the title property from document instance, we can add the title of the page as shown in the code snippet below:


  componentDidMount() {
    document.title = "About Page"; 
 }

  render() {
    return (
      <div className="App">
        <h1>Hello React App</h1>
      </div>
    );
  }
}

2. Using React Hooks

As of the latest versions of React, Hooks are becoming more popular as they optimize the overall workflow of the React ecosystem. Here, we can set the document title by using the useEffect hook. This hook executes at the initial stage when the component is mounted and also when the components state changes or the component re-renders. Inside the useEffect hook, we can simply set the document title as shown in the code snippet below:

import React, { useEffect} from "react";

export default function App() {

   useEffect(() => {
     document.title = "About Page";  
   }, []);

   return (
     <div className="App">
       <h1>Hello React App</h1>
     </div>
   );
}

3. Creating a Custom hook

This is an advanced form of setting the document title. This is not required in many cases but does help when the overall project is complex. Here, we simply formulate a custom hook that takes in a title as a prop and set it to the document inside the useEffect hook. Here, we assign the check variable to useEffect. Thus, the useEffect is triggered only when the check variable changes.

The implementation of the custom hook in the setDocumentTitle.js file is provided in the code snippet below:

import React, { useEffect, useState } from "react";

const useDocumentTitle = title => {
  const [document_title, setDoucmentTitle] = useState(title);
   useEffect(() => {
    document.title = document_title; 
  },[document_title]);

  return [document_title, setDoucmentTitle];
};

export {useDocumentTitle};

Now in order to use it, we need to import the useDocumentTitle hook from the setDocumentTitle file first in App.js. Then, we can simply pass the title name as a parameter in the useDocumentTitle hook as shown in the code snippet below:

import React from "react";
import {useDocumentTitle} from "setDocumentTitle"

export default function App() {
  const [document_title, setDoucmentTitle] = useDocumentTitle("Home page");
return (
    <div className="App">
      <h1>Hello React App</h1>
      <button onClick={() => setDoucmentTitle("About page")}>  
       Change document title     
       </button>   
     </div>
  );
}

Conclusion

The main goal of this tutorial was to showcase three different ways to set the document title in React ecosystem. It can be done in a simple as well as the complex way. The complex one simplifies the process in case the React project is a large one. In case of simpler project, simple way will work nicely. Also, we can the use of lifecycle hook for class component and use of React hooks for the functional component.

🤩 Our Amazing Sponsors 👇