Implementing a useToggle Hook in React with TypeScript

The useToggle hook is a common utility in React applications, providing a simple way to manage boolean state and toggle its value. This challenge asks you to implement this hook from scratch, ensuring type safety with TypeScript. A well-implemented useToggle hook promotes code reusability and simplifies component logic when dealing with on/off or enabled/disabled states.

Problem Description

You are tasked with creating a custom React hook called useToggle. This hook should accept an initial boolean value as an argument and return an array containing:

1. The current boolean state value.
2. A function to toggle the state value (flip it from true to false or vice versa).
3. A function to explicitly set the state to true.
4. A function to explicitly set the state to false.

The hook should utilize the useState hook internally to manage the state. The toggle function should update the state by inverting its current value. The setTrue and setFalse functions should update the state to the specified boolean value, respectively.

Key Requirements:

• The hook must be written in TypeScript.
• The initial value must be optional and default to false if not provided.
• The returned array should be properly typed.
• The hook should correctly manage the state and provide the expected toggle, setTrue, and setFalse functions.

Expected Behavior:

When the hook is initialized with a boolean value, the state should be set to that value. Calling the toggle function should invert the state. Calling setTrue should set the state to true, and setFalse should set the state to false.

Edge Cases to Consider:

• What happens if no initial value is provided? The state should default to false.
• Ensure the returned functions correctly update the state and trigger re-renders.

Examples

Example 1:

Input: Initial value: true
Output:
  - Initial state: true
  - Toggle function called: state becomes false
  - Toggle function called: state becomes true

Explanation: The hook is initialized with true. Each subsequent call to the toggle function inverts the state.

Example 2:

Input: Initial value: false
Output:
  - Initial state: false
  - setTrue function called: state becomes true
  - setFalse function called: state becomes false

Explanation: The hook is initialized with false. The setTrue and setFalse functions are used to explicitly set the state.

Example 3: (Edge Case)

Input: No initial value provided
Output:
  - Initial state: false
  - Toggle function called: state becomes true
  - setFalse function called: state becomes false

Explanation: Demonstrates the default behavior when no initial value is provided.

Constraints

• The hook must be implemented using the useState hook.
• The hook must be written in TypeScript.
• The returned array must be properly typed.
• The code should be concise and readable.
• The hook should not have any external dependencies.

Notes

• Consider using generics to ensure type safety for the initial value.
• Think about how to structure the returned array to clearly indicate the purpose of each element.
• Remember that React hooks must be called at the top level of a functional component or another custom hook.