State and useState

While props are data passed into a component, state is data managed inside a component that can change over time. When state changes, React re-renders the component to reflect the new values in the UI.

The useState Hook

useState is the primary Hook for adding state to a function component:

import { useState } from "react";

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

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

useState takes the initial value as its argument and returns a two-element array: the current state value and a setter function. By convention, these are destructured with names like [value, setValue].

State Updates are Asynchronous

React batches state updates and re-renders the component once after all updates in the same event are processed. Because of this, you should not rely on the current state value inside the setter if you are computing the next state from the previous one. Use the functional update form instead:

setCount((prev) => prev + 1);

This ensures prev is always the most recent value, even if multiple updates are batched together.

State with Objects and Arrays

State can hold objects and arrays, but you must treat them as immutable. Always create a new object or array rather than mutating the existing one:

const [user, setUser] = useState({ name: "Alice", age: 25 });

// Correct: spread to create a new object
setUser({ ...user, age: 26 });

// Wrong: mutating state directly (never do this)
// user.age = 26;
// setUser(user);

For arrays, use non-mutating methods like map, filter, and the spread operator to produce new arrays.

Multiple State Variables

You can call useState multiple times in one component to manage separate pieces of state:

function Form() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  return (
    <form>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
    </form>
  );
}

When to Use State

Use state for any data that:

• Changes over time (counters, form values, toggles).
• Affects what is rendered on screen.

Do not put derived values in state — compute them directly during rendering instead. And do not mirror props in state; just read props directly.