React Custom Hook: useDocumentTitle

This challenge asks you to create a reusable React custom hook called useDocumentTitle. This hook will manage and update the document's title based on a provided string, ensuring that the title reflects the current state or context of a component. It's a common pattern to improve user experience and SEO.

Problem Description

You need to implement the useDocumentTitle hook in TypeScript. This hook should accept a single argument: a string representing the desired document title. The hook should update the document.title property whenever the input string changes. It should also handle initial setup and cleanup to prevent memory leaks.

Key Requirements:

• Dependency Tracking: The hook should re-render and update the document title whenever the input string changes.
• Initial Setup: The hook should set the initial document title when it's first mounted.
• Cleanup: The hook should not cause memory leaks. It should not attempt to update the document title after the component unmounts.
• TypeScript: The hook must be written in TypeScript, with appropriate type annotations for the input and return value (if any).

Expected Behavior:

When the component using useDocumentTitle mounts, the document title should be set to the initial value passed to the hook. Whenever the value passed to the hook changes, the document title should be updated accordingly. When the component unmounts, no further title updates should occur.

Edge Cases to Consider:

• Empty String: The hook should handle an empty string input gracefully (e.g., setting the title to an empty string).
• Null/Undefined Input: The hook should handle null or undefined input gracefully. Consider setting a default title or ignoring the update.
• Rapid Updates: If the input string changes rapidly, the hook should efficiently update the title without causing performance issues.

Examples

Example 1:

Input: Component using useDocumentTitle("My App Title")
Output: document.title becomes "My App Title"
Explanation: The hook sets the initial document title to "My App Title" upon component mount.

Example 2:

Input: Component using useDocumentTitle("My App Title") then updating to useDocumentTitle("New Title")
Output: document.title changes from "My App Title" to "New Title"
Explanation: The hook updates the document title when the input string changes.

Example 3: (Edge Case)

Input: Component using useDocumentTitle(null)
Output: document.title remains unchanged (or set to a default title, e.g., "React App")
Explanation: The hook handles null input gracefully, preventing errors.

Constraints

• The hook must be written in functional component style using React's useState and useEffect hooks.
• The hook must be compatible with React 18 or later.
• The hook should not introduce any unnecessary dependencies.
• The hook should be performant and avoid unnecessary re-renders.

Notes

• Consider using useEffect to manage the side effect of updating the document title.
• Think about how to handle the cleanup phase to prevent memory leaks when the component unmounts.
• The hook doesn't need to return anything explicitly. Its primary purpose is to update the document title.
• Focus on creating a clean, reusable, and well-typed hook.