React useTitle Hook Challenge

This challenge asks you to create a custom React hook called useTitle that allows you to dynamically manage the document's title from within your React components. This is a common requirement for single-page applications (SPAs) to provide meaningful titles for different routes or states, improving SEO and user experience.

Problem Description

Your task is to implement a custom React hook named useTitle that accepts a string representing the desired document title. When the useTitle hook is called within a component, it should update the browser's document title to the provided string. The title should persist as long as the component using the hook is mounted. If the component unmounts, the title should ideally revert to a sensible default or its previous value.

Key Requirements:

1. Hook Signature: The hook should have the signature useTitle(title: string): void.
2. Title Update: On initial render and whenever the title prop changes, the hook must update document.title to the new value.
3. Cleanup: When the component that uses the hook unmounts, the document.title should be reset. A good default would be to revert to the title it had before the hook was applied, or to an empty string if no previous title can be determined reliably.

Expected Behavior:

• When a component calls useTitle('My New Page Title'), the browser tab's title should immediately change to "My New Page Title".
• If the component re-renders with a new title, e.g., useTitle('Another Page'), the title should update again.
• When the component unmounts, the document title should revert.

Edge Cases to Consider:

• Initial Title: What should the title be before any useTitle hook is applied? The hook should ideally not interfere with the initial title until it's called.
• Multiple Hooks: While less common, consider what happens if multiple components on the page use useTitle. The hook should ideally manage its state independently. The primary focus is on the component that's currently mounted and actively using the hook.
• Server-Side Rendering (SSR): Consider how this hook would behave in an SSR environment where document might not be immediately available or behave differently. (For this challenge, focus primarily on client-side behavior).

Examples

Example 1:

// In MyComponent.tsx
import React from 'react';
import { useTitle } from './useTitle'; // Assuming useTitle is in ./useTitle.ts

function MyComponent() {
  useTitle('Welcome to My App');

  return <div>Hello World!</div>;
}

// Initial document title: "My App Initial Title"
// After MyComponent mounts: document.title becomes "Welcome to My App"

Example 2:

// In AnotherComponent.tsx
import React, { useState } from 'react';
import { useTitle } from './useTitle';

function AnotherComponent() {
  const [pageName, setPageName] = useState('Details');
  useTitle(`Product ${pageName}`);

  const handleUpdateName = () => {
    setPageName('Overview');
  };

  return (
    <div>
      <h1>Product Details</h1>
      <button onClick={handleUpdateName}>Show Overview</button>
    </div>
  );
}

// Initial document title: "My App Initial Title"
// After AnotherComponent mounts: document.title becomes "Product Details"
// After clicking the button: document.title becomes "Product Overview"
// After AnotherComponent unmounts: document.title reverts to "My App Initial Title"

Example 3 (Edge Case - Component Unmount):

// In App.tsx
import React, { useState } from 'react';
import MyComponent from './MyComponent'; // Uses useTitle('Welcome to My App')

function App() {
  const [showMyComponent, setShowMyComponent] = useState(true);

  return (
    <div>
      {showMyComponent && <MyComponent />}
      <button onClick={() => setShowMyComponent(false)}>Hide My Component</button>
    </div>
  );
}

// Initial document title: "App Initial Title"
// When App mounts and MyComponent mounts: document.title becomes "Welcome to My App"
// When the button is clicked and MyComponent unmounts: document.title reverts to "App Initial Title"

Constraints

• The useTitle hook must be implemented using TypeScript.
• The hook should rely on standard browser APIs (document.title).
• The solution should be performant and avoid unnecessary re-renders or DOM manipulations.
• The cleanup mechanism should be robust.

Notes

• Consider using useEffect to handle the side effect of updating document.title and its cleanup.
• Think about how to store the original document title for restoration during cleanup. You might need to capture it when the hook is first invoked.
• For simplicity in this challenge, you can assume the initial document title is constant or can be captured once at the application's start. The focus is on the hook's ability to manage the title during its lifecycle.