Build the useToggle Custom Hook

Custom hooks are a powerful pattern in modern front-end development, allowing developers to extract reusable stateful logic into independent functions. This challenge focuses on building useToggle, a foundational custom hook designed to simplify the management of simple boolean states, such as visibility flags, dark mode toggles, or checkbox states, making your components cleaner and more modular.

Problem Description

Your task is to implement a language-agnostic custom hook, useToggle, which manages a boolean state. This hook should encapsulate the logic for initializing a boolean value and providing a function to flip that value.

Specifically, your useToggle implementation should:

• Accept a single argument, initialValue, which will set the starting boolean state.
• Return an array (or tuple, depending on the language) containing two elements:
  1. The current boolean value.
  2. A toggleValue function that, when called, will flip the current boolean value (i.e., if it's true, it becomes false, and vice-versa).
• The toggleValue function should not take any arguments itself.
• The state should persist across "re-renders" or subsequent calls to the logic that utilizes the hook, mimicking the behavior of stateful hooks in frameworks like React.

Examples

Example 1: Initializing with true

Input:
let [isVisible, toggleVisibility] = useToggle(true);

// Initial state
console.log(isVisible);

// Perform toggle
toggleVisibility();
console.log(isVisible);

// Perform another toggle
toggleVisibility();
console.log(isVisible);

Output:
true
false
true

Explanation: The state starts as true. The first call to toggleVisibility flips it to false. The second call flips it back to true.

Example 2: Initializing with false

Input:
let [isDarkMode, toggleDarkMode] = useToggle(false);

// Initial state
console.log(isDarkMode);

// Perform toggle
toggleDarkMode();
console.log(isDarkMode);

Output:
false
true

Explanation: The state starts as false. Calling toggleDarkMode changes it to true.

Constraints

• The initialValue argument passed to useToggle must always be a boolean (true or false).
• The toggleValue function returned by useToggle must not accept any arguments.
• The state management within the hook should ensure that value updates correctly and persists across logical updates, even if the useToggle function itself is called multiple times (e.g., in a loop or simulation of re-renders).
• The toggleValue operation should be highly efficient, ideally O(1) time complexity.

Notes

• Think about how to maintain state within a function that might be called multiple times. Consider patterns like closures or internal mutable state management depending on the language.
• This challenge emphasizes the conceptual understanding of a custom hook's responsibilities: state encapsulation and exposing an interface. While a specific framework's syntax (like React's useState) isn't required, the behavior should align with how such a hook would operate within those contexts.
• Focus on clarity and maintainability in your implementation.