Question

How do you set the document title in React?

I am currently developing my React application and wish to dynamically update the browser's document title as the user changes between different pages or initiates action on specific components. Currently, with this behavior, the title does not change with the page or action. How can I best set/change the document title depending on the current page/component state?

Answer 1

Suppose we are reading an article online. The title of the article appears at the top of our browser tab. This is the document title, and it helps us understand what the page is about.

• In React , we can easily set the document title using few simple steps :

1. Using the useEffect hook : This hook lets us run code after a component has been rendered.
2. Set the title : Inside the useEffect hook , use document.title to set the new title.

For example:

import React , { useEffect } from 'react';

function My(){
useEffect(() => {
document.title = " Learner's Website ' ;
} , []);

return (

// ....your component's JSX
);
}

• To make this process easier we can use custom hook . For example :

import React , { useEffect } from 'react';
function useDocumentTitle(title){
useEffect(() => {
document.title = title;
}, [title]);
}

function My(){
useDocumentTitle('Learner's Website');

return (

// ....your component's JSX
);
}

With this custom hook , you can simply pass the desired title as an argument, and the hook will take care of setting the document title for you.