Dynamically Set Document Title from a Component

Owner: SnippetBot Created: 2026-09-16 00:00:22 Size: 0.74 KB Expires: Never

tty1

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

import { useEffect } from 'react';

const useTitle = (title) => {
  useEffect(() => {
    if (typeof document === 'undefined') return; // Skip if in SSR environment

    const prevTitle = document.title;
    document.title = title;

    return () => {
      document.title = prevTitle;
    };
  }, [title]);
};

export default useTitle;

/* Example Usage:
import React from 'react';
import useTitle from './useTitle';

function UserProfilePage({ userName }) {
  useTitle(`${userName}'s Profile - My App`);

  return (
    <div>
      <h1>Welcome, {userName}!</h1>
      <p>This is your profile page.</p>
    </div>
  );
}

function HomePage() {
  useTitle('Home - My App');

  return (
    <div>
      <h1>Welcome to the Home Page!</h1>
    </div>
  );
}
*/

Dynamically Set Document Title from a Component

> FILE_REPORT