React useState Hook: Beginner’s Guide with Examples

In modern React, functional components use the useState Hook to manage state.

Before Hooks, state was only available in class components.
useState allows functional components to store and update dynamic data.

Think of useState as a box that holds a value. You can read it and update it, and React will re-render the component automatically.

Syntax

state → current value of the state
setState → function to update the state
initialValue → starting value of the state

Example 1: Basic Counter

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // initial state = 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
      <button onClick={() => setCount(count - 1)}>Decrease</button>
    </div>
  );
}

Explanation:

Clicking Increase updates state with setCount(count + 1).
React re-renders the component automatically.

Example 2: Managing Text Input

import { useState } from "react";

function InputBox() {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

text stores the current input value.
setText updates the state whenever the input changes.

Example 3: Multiple State Variables

function Profile() {
  const [name, setName] = useState("John");
  const [age, setAge] = useState(25);

  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <button onClick={() => setAge(age + 1)}>Increase Age</button>
    </div>
  );
}

Each useState call creates a separate state variable.
You can manage multiple pieces of state in one component.

Example 4: Updating State Based on Previous Value

Important: State updates may be asynchronous. Use the functional form of setState if the new value depends on the previous one.

Example 5: Boolean State (Toggle)

function Toggle() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle Message
      </button>
      {isVisible && <p>Hello, I am visible!</p>}
    </div>
  );
}

Toggling boolean state is simple with !isVisible.
Conditional rendering works seamlessly with state.

Best Practices for useState

Practice	Explanation
Keep state minimal	Only store data that changes, not everything.
Use multiple state variables	Instead of one big object, use separate states for independent data.
Functional updates	Use `prevState => newState` when updating based on previous state.
Avoid direct mutation	Never do `stateVar = newValue`; always use `setStateVar`.

FAQ

Q1: Can I use useState in class components?
No. useState works only in functional components.

Q2: Can state hold objects or arrays?
Yes. But remember to copy and update them immutably.

Q3: What happens if I update state directly without setState?
React won’t re-render, and UI will not update.