useState( )

#usestate #react

The useState() hook in React allows functional components to manage state. It returns a state variable and a function to update it. You initialize state with an initial value, and updating it triggers re-rendering. You can manage multiple state variables in a component. Always use the setter function to update state for React's efficiency.

const [state, setState] = useState(initialValue);
Here, state is the current value of the state variable, and setState is a function that allows you to update state.

setState(newValue);
setState(prevState => prevState + 1);

simple React component that implements a counter using the `useState()` hook:

import React, { useState } from 'react';

function Counter() {
  // Define a state variable 'count' and a function 'setCount' to update it
  const [count, setCount] = useState(0);

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      {/* Button to increment count */}
      <button onClick={() => setCount(count + 1)}>Increment</button>
      {/* Button to decrement count */}
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

export default Counter;