useDocumentTitle for React

Writes a string into the browser tab's title whenever it changes. For React, when the tab should show a live count or the page's name while it's open.

useDocumentTitle writes document.title from an effect, so the browser tab follows the string you pass.

It does not put the previous title back on unmount. The preview sets a title that starts with Docs demo, which you can read in the tab. For an on or off flag, see useBoolean. The effect runs in the browser, which keeps a React server render away from document.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import { useDocumentTitle } from "@/hooks/use-document-title";

useDocumentTitle("Docs demo");

Pass a new string when the tab should change. The hook returns nothing.

FAQ

Does useDocumentTitle restore the previous title on unmount?

No. The effect assigns document.title and returns no cleanup, so the last string stays after unmount. The hook does not remember the title it replaced. Save document.title yourself and write it back in your own cleanup if the page should return to the old tab text. The preview leaves the tab on a Docs demo title for that reason.

When does the title actually change?

It writes inside useEffect, after the browser paints, and again only when the title string changes. Effects do not run during server render, so the hook never reads document there. The tab can keep the server title until the client effect runs. Passing the same string again does not assign, because the effect skips an unchanged dependency.

Does this replace the server title or metadata?

No. The hook only assigns document.title in the browser. It does not edit the title from the server HTML, and it does not call a metadata API. A crawler that does not run the effect still sees the server title. Use the hook for the tab a person is looking at, such as a live count, not as the title for search results.

Can I pass an empty string?

Yes. The argument is a string and the effect assigns it as given. An empty string is a real change, so the effect sets document.title to that empty string. Most browsers then show a blank tab label or fall back to the address. The hook does not fill in a default when the string is empty, and it does not trim spaces.

What happens if two components set the title?

Each call runs its own effect. If they pass different strings, both assign document.title, and the effect that runs last wins. There is no stack of previous titles. Unmounting one component does not restore the other, because cleanup writes nothing. Own the tab from one place, and pass the string that should be showing now.

Does the same title get written again on every render?

No. The effect depends on the title string. React skips the effect when that string is the same as last time, so document.title is not assigned again. A different string always assigns, including a change in spaces. The hook does not ignore case and does not trim. Build the final string before you pass it in.