Solution

You'll set document.title in an effect that re-runs when the title changes, and stash the original title in a ref so unmount can put it back.

The problem, in plain English

document.title is a single global string — the browser-tab label. In a single-page app nothing resets it for you when you navigate, so a component that wants the tab to say "Checkout" has to write it, and then clean up after itself when it leaves, or the next page inherits a stale title. useDocumentTitle encapsulates that write-and-restore dance: set the title while mounted, and return the tab to its prior state on unmount.

The mental model

It's a borrow. On mount you remember the current title (so you can give it back), then you overwrite it. While mounted, any change to your title argument re-applies. On unmount, you restore what you borrowed. The subtle part is when you snapshot the original: it has to be once, on the first render, not on every title change.

A first attempt

The obvious version reads the previous title inside the same effect that sets the new one:

function useDocumentTitleNaive(title) {
  useEffect(() => {
    const prev = document.title;      // captured on EVERY run
    document.title = title;
    return () => {
      document.title = prev;          // restores an intermediate title
    };
  }, [title]);
}

Because the effect re-runs on every title change, prev is captured after the previous title was already applied. Go Original -> "A" -> "B": when the "B" effect runs, prev is "A", not "Original". Unmount then restores "A". The snapshot of the true original has to happen exactly once.

The working solution

const { useEffect, useRef } = require('react');

function useDocumentTitle(title) {
  // Capture the title from BEFORE the hook, exactly once.
  const prevTitle = useRef(null);
  if (prevTitle.current === null) {
    prevTitle.current = document.title;
  }

  // Apply the title whenever it changes.
  useEffect(() => {
    document.title = title;
  }, [title]);

  // Restore the original title on unmount only ([] deps).
  useEffect(() => {
    return () => {
      document.title = prevTitle.current;
    };
  }, []);
}

module.exports = { useDocumentTitle };

Two effects, split by responsibility. The prevTitle ref is seeded on the very first render — the === null guard makes that assignment run once, before any title has been overwritten, so it holds the true original. The first effect (deps [title]) keeps the tab in sync as the argument changes. The second effect (deps []) has no setup and a cleanup that runs only on unmount, restoring the borrowed title. Splitting them is what fixes the naive bug: the restore closure reads a value snapshotted once, not one re-captured on every change.

Walking through one call

Start with document.title === 'Original', mount useDocumentTitle('Inbox'), then the prop changes to '(3) Inbox', then the component unmounts:

• first render — prevTitle.current is null, so the guard sets it to 'Original'. Effects haven't run yet.
• after mount — the [title] effect sets document.title = 'Inbox'. The [] effect registers its cleanup.
• title changes to '(3) Inbox' — the [title] effect re-runs, setting document.title = '(3) Inbox'. prevTitle.current is untouched (still 'Original').
• unmount — the [] effect's cleanup runs: document.title = prevTitle.current = 'Original'. The tab is back to where it started, no matter how many times the title changed in between.

Gotchas

• Capturing prev in the title effect — re-runs snapshot an intermediate title, so unmount restores the wrong value. Snapshot once in a ref on first render.
• One effect for set + restore — combining them ties the restore value to the last change. Use a []-deps effect for the unmount-only restore.
• Seeding the ref in useState(document.title) vs a guard — both work; the point is once. Reading document.title in the render body without a guard would re-read every render.
• SSR — document is undefined on the server; in a real app guard the reads, though React effects only run in the browser so the effect bodies are already safe.

Going further

• restoreOnUnmount option — libraries expose a flag; some pages want their title to persist after unmount (e.g. a wizard's final step), so restore becomes opt-out.
• Title templates — a useDocumentTitle(title, { template: '%s · UIReady' }) pattern centralizes the "page · brand" suffix instead of repeating it at every call site.
• Deduping nested owners — if two mounted components both set the title, the last effect wins; a shared title stack (like react-helmet) resolves who owns the tab.