Implement React's useTransition Hook in TypeScript

This challenge asks you to replicate the functionality of React's useTransition hook. This hook is crucial for managing the state of asynchronous operations, specifically for providing feedback to the user during potentially slow updates to the UI. Mastering useTransition will significantly improve the perceived performance and user experience of your React applications.

Problem Description

Your task is to create a custom React hook named useTransition that mimics the behavior of React's built-in useTransition. This hook should allow you to mark a state update as "transition" and provide a boolean value indicating whether a transition is currently in progress.

Key Requirements:

1. startTransition Function: The hook should return a function, startTransition, which accepts a callback. This callback will contain the state update(s) that should be treated as a transition.
2. isPending State: The hook should return a boolean value, isPending, which is true when a transition initiated by startTransition is in progress, and false otherwise.
3. Debounced Pending State: The isPending state should only become false after a short delay once the transition has completed. This prevents flickering of UI elements during rapid state changes.
4. No Blocking: Transition updates should not block the main thread, allowing the UI to remain responsive. (Note: For this simulation, we'll focus on managing the isPending state and the debouncing logic. True non-blocking behavior in a simulation is complex and beyond the scope of a typical hook implementation challenge).
5. Type Safety: The hook must be implemented in TypeScript, ensuring type safety for its inputs and outputs.

Expected Behavior:

• When startTransition is called with a callback, isPending should immediately become true.
• The state updates within the callback should be executed.
• After the state updates are processed and the callback has finished, isPending should remain true for a short duration (e.g., 100ms) before becoming false.
• If multiple startTransition calls occur before the previous one's isPending has reset, the isPending state should reflect the latest transition.

Edge Cases to Consider:

• Rapid startTransition calls: How does the hook handle being called multiple times in quick succession?
• Empty startTransition callback: What happens if startTransition is called with an empty function?
• State updates outside startTransition: These should not affect the isPending state.

Examples

Example 1: Basic Usage

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

function MyComponent() {
  const [input, setInput] = useState('');
  const [list, setList] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setInput(e.target.value);
    startTransition(() => {
      // Simulate a potentially slow operation
      const newList = Array.from({ length: 10000 }, (_, i) => `${e.target.value}-${i}`);
      setList(newList);
    });
  };

  return (
    <div>
      <input type="text" value={input} onChange={handleChange} />
      {isPending && <p>Updating list...</p>}
      <ul>
        {list.slice(0, 10).map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

Input: User types "A" into the input field.

Output:

• isPending becomes true.
• The message "Updating list..." is displayed.
• The list starts to update in the background.
• After the list update completes and a short delay, isPending becomes false, and the "Updating list..." message disappears.

Explanation: Typing into the input triggers startTransition. The isPending flag is set, informing the user of an ongoing update. Once the list is populated and the debounce delay passes, isPending is reset.

Example 2: Multiple Transitions

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

function AnotherComponent() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('Initial');
  const [isPending, startTransition] = useTransition();

  const handleExpensiveUpdate = () => {
    startTransition(() => {
      // Simulate a long operation
      const startTime = Date.now();
      while (Date.now() - startTime < 50) {} // Simulate 50ms work
      setCount(prev => prev + 1);
    });
  };

  const handleAnotherUpdate = () => {
    startTransition(() => {
      const startTime = Date.now();
      while (Date.now() - startTime < 30) {} // Simulate 30ms work
      setMessage(`Updated at ${Date.now()}`);
    });
  };

  return (
    <div>
      <p>Count: {count}</p>
      <p>Message: {message}</p>
      <button onClick={handleExpensiveUpdate} disabled={isPending}>
        Expensive Update
      </button>
      <button onClick={handleAnotherUpdate} disabled={isPending}>
        Another Update
      </button>
      {isPending && <p>Pending Transition...</p>}
    </div>
  );
}

Input:

1. User clicks "Expensive Update".
2. While "Pending Transition..." is still visible, user clicks "Another Update".

Output:

• After clicking "Expensive Update", isPending becomes true. "Pending Transition..." appears.
• When "Another Update" is clicked, isPending remains true (as a transition is already in progress).
• Both updates eventually complete. The isPending flag will reset after the last transition finishes and its debounce delay elapses.

Explanation: The hook correctly handles sequential transitions, ensuring isPending stays true until all scheduled transition updates have finished and the debounce period has passed for the latest one.

Constraints

• Debounce Delay: The debounce delay for resetting isPending should be configurable or set to a reasonable default, like 100ms.
• State Management: Use useState and useRef hooks internally as needed.
• No External Libraries: Do not use any third-party libraries for the core useTransition logic.
• Performance: The hook itself should have minimal performance overhead.

Notes

• Consider how to handle the actual state updates within the startTransition callback. You'll likely need to use React.startTransition internally if you were building a true production-ready hook. For this exercise, you will simulate the effect of state updates on the UI by calling the provided callback.
• The concept of "transition" in React is about prioritizing urgent updates (like typing) over non-urgent ones (like rendering a large list based on that typing). This hook helps signal when a non-urgent update is happening.
• Think about how you can manage the isPending state and ensure it's reset only after the transition is fully complete and the debounce period has passed. A setTimeout will be essential here.
• You'll need to keep track of whether a transition is currently in progress to prevent isPending from resetting too early if multiple transitions are initiated.