useDocumentTitle
Updates document.title and can restore its original value during cleanup.
About
useDocumentTitle writes a page title after the component commits. It can restore the title that existed when this hook instance first rendered.
Examples
import { useState } from "react";
import { useDocumentTitle } from "rooks";
export default function TitledCounter() {
const [count, setCount] = useState(0);
useDocumentTitle(`Messages (${count})`, { resetOnUnmount: true });
return (
<button type="button" onClick={() => setCount((value) => value + 1)}>
Messages: {count}
</button>
);
}Parameters
| Argument | Type | Default | Meaning |
|---|---|---|---|
title | string | required | Next value for document.title. |
options | { resetOnUnmount?: boolean } | {} | Controls restoration behavior. |
options.resetOnUnmount | boolean | false | Restores the title captured on the first render during cleanup. |
The options shape is shown inline because it is not a public type export.
Return value
The hook returns void.
Behavior and lifecycle
The title is written in a normal effect. With restoration enabled, cleanup runs before a changed title or option is applied and on unmount, restoring the original captured title. Multiple mounted owners of document.title can overwrite one another, so keep a single clear owner for a page.
Compatibility and accessibility
Server rendering is a no-op. The server HTML title does not change until the client effect runs, so set framework-level metadata for the initial response when possible. Titles should be concise, unique, and place the most specific page name first for screen-reader and browser-tab users.