React useDocumentTitle Hook
React useDocumentTitle hook for dynamic browser tab titles. Real-time updates with unread counts and status indicators using TypeScript for Next.js apps.
Need help with dynamic browser tab titles?
Join our Discord community for help from other developers.
Ever tried to update your browser tab title dynamically and ended up writing document.title = "New Title" scattered throughout your components? You know the drill—manually tracking state changes, forgetting to update titles on route changes, dealing with SSR hydration issues where document doesn't exist. This free open source React useDocumentTitle custom hook handles all that title management boilerplate so you can focus on building features instead of chasing document.title updates across your React applications.
useDocumentTitle showcase
Simple document title updates that sync with your React state:
This free open source React hook simplifies browser tab management with TypeScript support for modern JavaScript applications. Whether you're building notification systems, progress indicators, or status dashboards in your Next.js projects, this React hook keeps your document titles in sync.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/use-document-title.jsonnpx shadcn@latest add https://www.shadcn.io/registry/use-document-title.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/use-document-title.jsonbunx shadcn@latest add https://www.shadcn.io/registry/use-document-title.jsonWhy most document title implementations suck
Look, you could keep writing document.title = "New Title" everywhere in your React components. But then you hit the SSR wall—document doesn't exist on the server. You add typeof checks, useEffect wrappers, and before you know it, you're managing title updates in five different places.
Most developers forget about SSR hydration issues when directly accessing document in TypeScript components. Or they scatter document.title assignments throughout their codebase without proper effect management, leading to memory leaks and inconsistent state in Next.js projects.
This React hook handles all the messy parts—SSR safety, effect cleanup, and automatic synchronization with your component state in JavaScript applications. No more scattered document.title assignments or hydration mismatches.
Plus it's just cleaner. Instead of remembering to manually update titles when state changes, you pass your dynamic title to the React hook and it handles the rest.
This free open source React hook keeps your browser tabs in sync while you focus on building features. Whether you're creating React applications, Next.js dashboards, or TypeScript admin panels, automatic title management keeps your JavaScript development smooth.
Features
- Document title management with automatic DOM updates and React state synchronization in Next.js applications
- SSR safety handles server-side rendering without document access errors for TypeScript components
- TypeScript support with complete interface definitions and IntelliSense integration
- Zero dependencies lightweight implementation with just React hooks for JavaScript development
- Automatic cleanup with proper useEffect dependency handling in React applications
- Real-time updates sync with your component state changes instantly in modern frameworks
- Free open source designed for modern React development workflows
When you'll actually use this
Real talk—this isn't for static titles in React applications. Stick with regular HTML title tags for pages that don't change. But when you need dynamic updates based on user activity, this React hook keeps things clean in Next.js projects.
Perfect for:
- Dashboard notifications - Show unread counts and status updates in browser tabs built with TypeScript
- Chat applications - Display new message indicators and active conversation names using React patterns
- Progress tracking - Task completion percentages and project status updates in JavaScript applications
- E-commerce carts - Shopping cart item counts and checkout progress in React components
- Status dashboards - User presence indicators and system health monitoring in Next.js applications
- Tab navigation - Active page tracking and route-based title updates using TypeScript routing
API Reference
useDocumentTitle
| Parameter | Type | Default | Description |
|---|---|---|---|
title | string | required | The title text to set for the document |
Common gotchas
Title updates on every render change: The React hook uses useEffect with the title as a dependency in TypeScript components, so make sure you're not creating new title strings on every render unless that's what you want.
SSR handling is automatic: The hook checks if document exists before updating in Next.js applications, so you won't get hydration errors or server-side rendering issues.
String sanitization is your responsibility: The React hook passes whatever you give it directly to document.title in JavaScript applications, so handle any escaping or validation you need beforehand.
Performance considerations are minimal: Document title updates are cheap DOM operations in React development, but avoid unnecessary re-computations of complex title strings using useMemo.
Multiple hook instances conflict: Only one document title can exist at a time in TypeScript projects. The last component to render wins, so coordinate title updates carefully in React applications.
Title persistence after unmount: The title stays as whatever you last set it to in Next.js projects. It doesn't automatically reset when components unmount.
Related hooks you will also like
useIsClient
Client-side rendering detection for SSR-safe DOM operations
useCounter
Counter state management for notification counts in titles
useBoolean
Boolean state management for status indicators in titles
useLocalStorage
Persist title preferences and user settings across sessions
useDebounceValue
Debounce rapid title changes for smooth user experience
useMediaQuery
Responsive title updates based on screen size or device
Questions you might have
React useDebounceValue Hook
React useDebounceValue hook for debounced state management. Optimize search inputs and form values with TypeScript support for Next.js apps.
React useEventCallback Hook
React useEventCallback hook for stable event callbacks. Solve useCallback dependency issues with TypeScript support for Next.js applications.