Implement a Reusable useToggle Hook in React

This challenge focuses on building a custom React hook, useToggle, that simplifies managing boolean state. A toggle is a common UI pattern, and abstracting its logic into a reusable hook will lead to cleaner and more maintainable React components.

Problem Description

You need to implement a custom React hook named useToggle. This hook should manage a boolean state and provide a way to toggle that state between true and false.

Key Requirements:

1. State Management: The hook should maintain a boolean state internally.
2. Initial Value: The hook should accept an optional initial boolean value. If no initial value is provided, it should default to false.
3. Toggle Function: The hook should return a function that, when called, flips the current boolean state.
4. Return Value: The hook should return an array containing:
   • The current boolean state.
   • The toggle function.

Expected Behavior:

When the returned toggle function is invoked, the hook's internal boolean state should switch from its current value to the opposite value.

Edge Cases:

• Consider what happens if the hook is used without providing an initial value.
• Ensure the toggle function correctly handles both true and false initial states.

Examples

Example 1:

// Component Usage:
function MyComponent() {
  const [isToggled, toggle] = useToggle(); // Defaults to false

  return (
    <div>
      <p>Status: {isToggled ? 'On' : 'Off'}</p>
      <button onClick={toggle}>Toggle</button>
    </div>
  );
}

// Initial Render:
// Status: Off

// After clicking the button:
// Status: On

// After clicking the button again:
// Status: Off

Explanation: The useToggle hook is called without an initial value, so isToggled starts as false. Clicking the button calls toggle, which flips isToggled to true, then back to false on the next click.

Example 2:

// Component Usage:
function AnotherComponent() {
  const [isActive, toggleActive] = useToggle(true); // Starts as true

  return (
    <div>
      <p>Active: {isActive ? 'Yes' : 'No'}</p>
      <button onClick={toggleActive}>Toggle Active</button>
    </div>
  );
}

// Initial Render:
// Active: Yes

// After clicking the button:
// Active: No

// After clicking the button again:
// Active: Yes

Explanation: The useToggle hook is initialized with true. isActive starts as true. Clicking the button invokes toggleActive, toggling the state between true and false.

Constraints

• The hook must be implemented in TypeScript.
• The hook should adhere to the standard React hook rules (e.g., only call hooks at the top level of your React function component or another custom hook).
• The returned toggle function should be stable (i.e., it should not be recreated on every render unless its dependencies change, although in this simple case, it won't have external dependencies).

Notes

• You will likely need to use the useState hook internally within useToggle.
• Think about the return type of your useToggle hook, especially the type of the toggle function.
• The goal is to create a clean and reusable abstraction for common boolean toggling logic.