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:

useEffect(() => {
    document.title = 'Example title';
}, []);

Practical example

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:

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:

See also

1. React - useEffect hook