State in React

React.js 119 views Nov 05, 2025 2 min read

State is used to store and manage data that changes over time in a React component. When state changes, React automatically re-renders the component to reflect the updated data.

What is State?

State is local to a component
It can change based on user interaction or logic
Updating state causes the UI to update

Using State with `useState`

In functional components, state is managed using the useState hook.

import { useState } from "react";

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

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

count → current state value
setCount → function to update state
0 → initial state value

Updating State

Correct Way

setCount(count + 1);

Using Previous State

setCount(prevCount => prevCount + 1);

This is recommended when the new state depends on the old state.

State with Multiple Values

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

Update part of the state:

setUser({ ...user, age: 23 });

State vs Props

State	Props
Managed inside component	Passed from parent
Can change	Read-only
Triggers re-render	Does not change itself

Common Use Cases for State

Form inputs
Toggle buttons
Counters
Modal visibility
API data storage

Important Rules of State

❌ Do not modify state directly

count = count + 1; // wrong

✅ Always use the setter function

setCount(count + 1);

State updates may be asynchronous

Example: Toggle State

function Toggle() {
  const [isOn, setIsOn] = useState(false);

  return (
    <button onClick={() => setIsOn(!isOn)}>
      {isOn ? "ON" : "OFF"}
    </button>
  );
}