How to create useState hook in vanilla JavaScript?

To create a simplified version of the useState hook from React in vanilla JavaScript, you can leverage closures and JavaScript object destructuring. Here's a basic implementation:

function useState(initialValue) {
  // Initialize the state variable with the provided initial value
  let state = initialValue;

  // Define a function to update the state
  function setState(newState) {
    state = newState;
    // Trigger re-rendering of the component (not implemented in this example)
    render();
  }

  // Return an array containing the current state and the function to update it
  return [state, setState];
}

Here's how you can use this custom useState hook:

// Usage example
const [count, setCount] = useState(0);

// Increment the count
setCount(count + 1);

// Log the current state
console.log(count); // Output: 1

This useState implementation is simplified and lacks some features and optimizations present in React's useState hook, such as batching updates, lazy initialization, and preservation of state between re-renders. Additionally, it doesn't handle asynchronous updates or support functional updates (using a function as an argument to update the state based on the previous state). However, it demonstrates the basic idea of how you can create a simple state management hook in vanilla JavaScript.