How can I dynamically change title in Vite React?

Question

Vite React template has a file called index.html at the root of the project.

The way I understood, this file is static.

I want to change the title of each page based individually.

I know I can use useEffect in each page and set the title using simple vanilla JS.

But I wonder if there is a better more standard react-y way to do that?

Answer 1

You can use react-helmet package, it enables you to add head tag in any component that you want

Answer 2

Using useEffect seems pretty reasonable. You can encapsulate it into your own useTitle hook for more clarity (see for instance https://www.30secondsofcode.org/react/s/use-title).