React - set web page title dynamically

In this article, we would like to show you how to set web page title dynamically in React.

Quick solution:

xxxxxxxxxx

useEffect(() => {

    document.title = 'Example title';

}, []);

In this example, we use the useEffect hook to set document.title. Using the hook with the second argument set to an empty array ([]), the effect will be applied only once, on the app render. 

App.js file:

xxxxxxxxxx

import React from 'react';

import { useEffect } from 'react';

​

const App = () => {

    useEffect(() => {

        document.title = 'Example title';

    }, []);

​

    return <div>App body here</div>;

};

​

export default App;

Result:

1. React - useEffect hook