ReviseAlgo Logo

Fundamentals

State

Master React state management, covering component memory, the useState Hook, update snapshots, batching rules, and state immutability.

Last Updated: July 15, 2026 • 13 min read

1. Learning Objectives

In this lesson, you will learn how components store and update their own local data. By the end of this topic, you will be able to:

  • Explain the difference between variables and state inside React.
  • Initialize and update component state using the useState Hook.
  • Describe how state updates trigger component re-render runs.
  • Explain the concept of state as a snapshot and update batching.
  • Apply immutability principles to safely update object and array states.

2. Overview

State represents local data that a component holds and manages over time. Unlike props, which are passed down from a parent and are read-only, state is private to the component and can be modified. When a component's state updates, React automatically schedules a re-render of that component and its children to keep the UI in sync.

3. Why This Topic Matters

State makes web applications interactive and dynamic:

  • Interactive UIs: Without state, interfaces remain static documents. State allows you to build features like collapse toggles, search filters, shopping carts, and dynamic forms.
  • Automated Sync: In vanilla JS, updating a variable requires you to manually query the DOM and update the HTML element. In React, you simply update the state, and React handles the DOM updates automatically.

4. Real-World Analogy

Think of React state like **a physical light switch status**:

  • The State: The physical position of the switch (either "ON" or "OFF").
  • The Trigger: Flipping the switch to change its position.
  • The Render: The room instantly changes state (going from dark to illuminated). You don't need to manually paint the walls white or turn on individual light bulbs; flipping the switch automatically updates the environment. State is the switch position, and the lighting is the rendered layout.

5. Core Concepts

Below is a comparison of direct mutations versus safe state updates using setter functions:

Property Direct Mutation (Incorrect) Setter Function (Correct)
Syntax state.count = count + 1 setCount(count + 1)
DOM Trigger No re-render occurs; the UI remains static. Triggers a Virtual DOM diffing and re-render.
Object references Mutates the existing reference, breaking change detection. Creates a new reference, allowing React to detect the change.

6. Syntax & API Reference

This example shows how to declare, read, and update state using the useState Hook:

7. Visual Diagram

This diagram displays the React state loop:

8. Live Example — Full Working Code

Below is a complete HTML page containing a counter and toggle widget using state:

What just happened? Clicking the "Add" button calls setCount(count + 1). React schedules a re-render, runs the App function with the updated count value, and updates the DOM. Clicking "Hide Panel" toggles the isOpen boolean, showing or hiding the counter panel dynamically.

9. Interactive Playground

Try It Yourself Challenges:

  1. Add a "Reset" button next to "Subtract" that calls setCount(0) to reset the counter.
  2. Modify the layout to apply a dark slate background style to the dashboard box when count exceeds 10.

10. Common Mistakes

Mistake Why it happens Wrong Correct
Mutating state objects or arrays directly React compares old and new state object references. Mutating properties directly does not change the reference, so React fails to detect the update. user.name = 'Alice';
setUser(user);		 setUser({ ...user, name: 'Alice' }); (using spread operator to create a new object)
Calling Hooks conditionally React relies on the order of Hook declarations to match state variables between renders. Calling Hooks inside conditions breaks this order. if (condition) {
const [val, setVal] = useState(0);
}		 Always declare Hooks at the top level of the component function, before any conditional returns.

11. Best Practices

  • Keep state local when possible: Only store state variables inside components that actually need to read or update them.
  • Use functional updates when dependent on previous state: Use updater functions (e.g. `setCount(prev => prev + 1)`) to avoid race conditions when scheduling multiple updates.
  • Create new references for object and array updates: Always use the spread operator (`...`) to create copy references when modifying object or array states.
  • Declare Hooks at the top level: Never call `useState` inside conditionals, loops, or nested functions.

12. Browser Compatibility/Requirements

The useState Hook is supported in all modern web browsers.

13. Interview Questions

Q1: Explain what "state as a snapshot" means in React. Why doesn't the alert below show the updated value immediately?

Answer: Inside a component render cycle, state variables behave like immutable snapshots of data at that point in time. Calling `setCount(count + 1)` requests a new render cycle with the updated value, but it does not modify the active `count` variable in the current execution block. The variable remains `0` until the function runs again in the next render cycle.

Q2: Why does React batch state updates, and how does this affect rendering performance?

Answer: Batching means React consolidates multiple state updates inside the same event loop (e.g. inside a single click handler) and runs them in a single render pass. This prevents unnecessary layout calculations and repaints, ensuring the UI remains performant.

14. Debugging Exercise

Identify why clicking "Add item" fails to render the new item in the list:

View Solution

Diagnosis: Calling list.push mutates the existing array directly without changing the object reference. When setList(list) is called, React compares the old and new references (`old === new`), determines that no changes occurred, and skips the re-render cycle.

Fix: Create a new array using the spread operator:

15. Practice Exercises

Exercise 1: Create a font size adjuster

Build a component with state managing font sizes (e.g. fontSize = 16). Add "Grow" and "Shrink" buttons that update the size value dynamically, adjusting paragraph style heights in real-time.

16. Scenario-Based Challenge

The Multi-Step Checkout Form State:

You are designing a multi-step user registration form (Step 1: Account, Step 2: Shipping, Step 3: Review). Explain how you would structure the state (declaring single parent object containers vs separate state fields) to manage form data across different steps, and describe how you would pass updates back to parent state repositories.

17. Quick Quiz

Q1: What are the two items returned in the array when calling the useState Hook?

A) The state object and the render function.

B) The current state value and a setter function to update it.

C) The initial state value and a duplicate copy value.

Answer: B — useState returns an array containing the read-only state snapshot and an updater function.

18. Summary & Key Takeaways

  • State stores local, private component data that can be updated over time.
  • Calling state setter functions schedules a component re-render pass in React.
  • State values are immutable; you must copy objects/arrays using the spread operator before modifying them.
  • React batches multiple state updates inside handlers to optimize rendering performance.

19. Cheat Sheet

State Pattern Purpose
const [x, setX] = useState(init); Initializes a state variable and setter function.
setX(prev => prev + 1) Updates state using a callback function to prevent race conditions.
setObj({ ...obj, name: 'Alice' }) Safely updates an object state by copying and updating properties.
---