React Custom Hook: useDocumentTitle

In web development, the document title is a crucial element for user experience and SEO. It appears in browser tabs, search results, and when bookmarking a page. This challenge asks you to create a custom React hook, useDocumentTitle, that allows you to dynamically manage the document's title as your application's state or components change.

Problem Description

You need to implement a custom React hook named useDocumentTitle that takes a string representing the desired document title as an argument. This hook should update the browser's document title whenever it's called or when the provided title changes.

Key Requirements:

• The hook must accept a single string argument: title.
• Upon the initial render of a component using the hook, the document.title should be set to the provided title.
• If the title argument passed to the hook changes during subsequent renders, document.title should be updated accordingly.
• The hook should handle cases where the title might be an empty string or null/undefined. In such cases, it should ideally reset to a default or previously set title, or simply not change if that's the desired behavior (clarified in Notes).

Expected Behavior:

When a component using useDocumentTitle('/My Page') mounts, document.title should become "My Page". If that same component later re-renders and useDocumentTitle('/Updated Page') is called, document.title should update to "Updated Page".

Edge Cases to Consider:

• What happens if the title argument is null, undefined, or an empty string?
• How should the hook behave when a component unmounts? Should it revert the title to a previous state or a default?

Examples

Example 1:

import React, { useState } from 'react';
import { useDocumentTitle } from './useDocumentTitle'; // Assuming your hook is in this file

function HomePage() {
  useDocumentTitle('Welcome to My App');

  return <h1>Home Page Content</h1>;
}

function App() {
  return <HomePage />;
}

Output: When the HomePage component renders, document.title will be set to "Welcome to My App".

Example 2:

import React, { useState } from 'react';
import { useDocumentTitle } from './useDocumentTitle';

function ProductDetails({ productId }) {
  const title = `Product Details - ID: ${productId}`;
  useDocumentTitle(title);

  return <h2>Details for Product {productId}</h2>;
}

function App() {
  const [currentProductId, setCurrentProductId] = useState('123');

  return (
    <div>
      <ProductDetails productId={currentProductId} />
      <button onClick={() => setCurrentProductId('456')}>View Product 456</button>
    </div>
  );
}

Output: Initially, document.title will be "Product Details - ID: 123". When the button is clicked, document.title will update to "Product Details - ID: 456".

Example 3: Handling Empty Title

import React, { useState } from 'react';
import { useDocumentTitle } from './useDocumentTitle';

function SettingsPage({ showAdvanced }) {
  const title = showAdvanced ? 'Advanced Settings' : '';
  useDocumentTitle(title);

  return <h2>Settings</h2>;
}

function App() {
  const [advanced, setAdvanced] = useState(false);

  return (
    <div>
      <SettingsPage showAdvanced={advanced} />
      <button onClick={() => setAdvanced(!advanced)}>
        {advanced ? 'Hide Advanced' : 'Show Advanced'}
      </button>
    </div>
  );
}

Output: If showAdvanced is false, document.title might become an empty string (or reset to a default as per Notes). If showAdvanced becomes true, document.title will update to "Advanced Settings".

Constraints

• The hook must be implemented in TypeScript.
• The hook should be efficient and not cause unnecessary re-renders.
• The hook should not introduce any external dependencies beyond React itself.

Notes

• Consider using useEffect to manage the side effect of updating the document title.
• Think about how you want to handle the case where the title argument is null, undefined, or an empty string. A common approach is to not change the title if an empty string is provided, or to revert to a default title if that's desired. For this challenge, assume that if an empty string or null/undefined is provided, the document.title should not be changed from its current value.
• For simplicity in this challenge, you do not need to implement logic to restore the previous document title upon component unmount. The title will simply remain as it was last set by the hook.