State with useState

⚛️ React 18+ 🟢 Chapter 12 of 39 📂 Phase 05: Events and State 📅 2026 Edition

📌 Covered in this chapter: State vs Normal Variable · useState · Updating State · Multiple State Values · Boolean/Number/String/Object/Array State · Immutability

State is data that a component "remembers" between renders, and that automatically triggers a re-render whenever it changes. This is the mechanism that makes React interfaces truly interactive.

1State vs a Normal Variable

A regular JavaScript variable inside a component resets to its initial value every single time the component re-renders — it can't "remember" anything across renders, and changing it doesn't trigger a re-render in the first place. State solves both problems: React remembers it between renders, and updating it automatically triggers a fresh render with the new value.

2Declaring and Updating State with useState

💻 Example 1: A Working Counter

JSX▶ Run in Compiler

import { useState } from "react";

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

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

🔍 Line-by-Line Breakdown:

useState(0): creates a state variable starting at 0
const [count, setCount]: array destructuring — count is the current value, setCount is the function used to update it
setCount(count + 1): updates state and triggers React to re-render the component with the new value

3Functional Updates and Multiple State Values

const [count, setCount] = useState(0);
const [name, setName] = useState("");
const [isVisible, setIsVisible] = useState(true);

// Functional update - safer when the new value depends on the previous one
setCount((previousCount) => previousCount + 1);

A component can have as many independent useState calls as needed. The functional update form — passing a function instead of a raw value — guarantees you're working from the most current state, which matters especially when updates happen in quick succession.

⚠️ Trying to Read Updated State Immediately After Calling setState

State updates are not immediate — calling setCount(count + 1) and then logging count on the very next line still shows the old value, because the update only takes effect on the component's next render. If you need the new value right away for further logic, use the functional update form or a useEffect (Chapter 19).

💻 Hands-on Interactive Practice Challenge

Build a toggle button that switches a boolean isOn state between true and false, displaying "ON" or "OFF" accordingly.

React Practice Challenge ▶ Run in Compiler

import { useState } from "react";

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

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

Run This Challenge in Online JS IDE →

❓ Frequently Asked Questions (FAQ)

Q Why does my component re-render when state changes?

That's the entire purpose of state — React is designed to automatically call your component function again and update the DOM whenever a state setter (like setCount) is called, keeping the UI in sync with the data.

Q Can I use a regular variable instead of useState for something that changes?

Technically you can declare it, but changing it won't trigger a re-render, so the screen simply won't update to reflect the new value. Anything that should visibly update the UI must live in state.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on React 18+ · Last updated August 2026