What is state in React - Visual Explanation

Concept Flow - What is state

Component renders

↓

useState sets initial state

↓

User interacts (e.g., clicks button)

↓

State update function called

↓

React schedules re-render

↓

Component re-renders with new state

↓

UI updates to show new state

This flow shows how React components use state to remember values and update the UI when those values change.

Execution Sample

React

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

A simple counter button that shows a number and increases it by 1 each time you click.

Execution Table

Step	Action	State Before	State Update	State After	UI Output
1	Component renders first time	count = undefined	useState(0) sets count to 0	count = 0	Button shows '0'
2	User clicks button	count = 0	setCount(count + 1) called	count = 1	Button shows '1'
3	Component re-renders	count = 1	No update	count = 1	Button shows '1'
4	User clicks button again	count = 1	setCount(count + 1) called	count = 2	Button shows '2'
5	Component re-renders	count = 2	No update	count = 2	Button shows '2'
6	No more clicks	count = 2	No update	count = 2	Button shows '2'

💡 Execution stops when user stops clicking; state remains stable.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	Final
count	undefined	0	1	1	2	2

Key Moments - 3 Insights

Why does the UI update only after the component re-renders?

React updates the UI only when the component re-renders with new state values, as shown in steps 3 and 5 of the execution_table.

What happens if we call setCount with the same value as current state?

React will not re-render the component because the state did not change, so the UI stays the same. This is why state updates trigger re-renders only on changes.

Why do we use useState inside the component function?

useState must be called inside the component to create state tied to that component's lifecycle, as shown in step 1 where useState sets initial count.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of count after the second user click?

A 2

B 1

C 0

D 3

💡 Hint

Check the 'State After' column at step 4 where the second click updates count.

At which step does the component first show '1' on the button?

A Step 2

B Step 3

C Step 1

D Step 4

💡 Hint

Look at the UI Output column; the UI updates after re-render in step 3.

If the user never clicks the button, what will the UI show?

A 1

B undefined

C 0

D Error

💡 Hint

Refer to step 1 where initial state is set and UI shows '0'.

Concept Snapshot

React state holds values that can change over time.
Use useState hook inside a component to create state.
Calling the state update function schedules a re-render.
UI updates to reflect the new state after re-render.
State is local to the component and preserved between renders.

Full Transcript

In React, state is a way to keep track of values that can change while the app runs. We use the useState hook inside a component to create a state variable and a function to update it. When the update function is called, React remembers the new value and re-renders the component. The UI then shows the updated value. For example, a counter button starts at 0 and increases by 1 each time you click it. The state changes from 0 to 1, then 2, and so on, and the button text updates accordingly. This process helps React apps respond to user actions and show fresh data.

Practice

1. What is the main purpose of state in a React component?

easy

A. To create static content that never changes

B. To define the component's style and layout

C. To import external libraries into the component

D. To store data that can change and affect the component's display

Solution

1. Step 1: Understand what state represents

   State holds information that can change over time and affects what the component shows.

2. Step 2: Compare options with the definition

   Only To store data that can change and affect the component's display correctly describes state as data that changes and affects display.

3. Final Answer:

   To store data that can change and affect the component's display -> Option D

4. Quick Check:

   State = data that changes and updates UI [OK]

Hint: State holds changing data that updates the screen [OK]

Common Mistakes:

• Confusing state with styling or layout
• Thinking state is for static content
• Mixing state with importing libraries

2. Which of the following is the correct way to declare a state variable called count with initial value 0 in a React functional component?

easy

A. const count = useState(0);

B. let count = 0;

C. const [count, setCount] = useState(0);

D. var count = useState(0);

Solution

1. Step 1: Recall the useState syntax

   useState returns an array with current value and a setter function, usually destructured as [value, setValue].

2. Step 2: Check each option's syntax

   const [count, setCount] = useState(0); correctly uses array destructuring with useState(0). Options A, B, and C do not follow the correct pattern.

3. Final Answer:

   const [count, setCount] = useState(0); -> Option C

4. Quick Check:

   useState syntax = [value, setValue] [OK]

Hint: useState returns [value, setter] array, destructure it [OK]

Common Mistakes:

• Using var or let without useState
• Not destructuring the array returned by useState
• Assigning useState directly to a single variable

3. Consider this React component code:

import React, { useState } from 'react';

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

      
Count: {count}
       setCount(count + 1)}>Increase
    
  );
}

What will be displayed after clicking the button three times?

medium

A. Count: 3

B. Count: 0

C. Count: 1

D. Count: undefined

Solution

1. Step 1: Understand initial state and button action

   Initial count is 0. Each button click calls setCount(count + 1), increasing count by 1.

2. Step 2: Calculate count after 3 clicks

   After 3 clicks, count increments 3 times: 0 + 3 = 3.

3. Final Answer:

   Count: 3 -> Option A

4. Quick Check:

   3 clicks increase count from 0 to 3 [OK]

Hint: Each click adds 1 to count starting from 0 [OK]

Common Mistakes:

• Thinking count resets on each click
• Confusing initial value with updated value
• Ignoring that setCount updates state asynchronously

4. What is wrong with this React state update code?

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

function increment() {
  count = count + 1;
}

medium

A. Missing initial value in useState

B. Directly modifying state variable instead of using setter

C. Using const instead of let for count

D. Setter function name is incorrect

Solution

1. Step 1: Identify how state should be updated

   React state must be updated using the setter function returned by useState, not by direct assignment.

2. Step 2: Analyze the code's mistake

   The code tries to assign directly to count, which is a constant and does not update React state.

3. Final Answer:

   Directly modifying state variable instead of using setter -> Option B

4. Quick Check:

   Use setter function to update state [OK]

Hint: Never assign state variable directly; use setter function [OK]

Common Mistakes:

• Trying to assign value directly to state variable
• Ignoring that useState returns a setter function
• Confusing const with let for state variables

5. You want to create a React component that shows a list of items and lets the user add new items. Which approach correctly uses state to update the list when a new item is added?

hard

A. Use const [items, setItems] = useState([]); and update with setItems([...items, newItem])

B. Use let items = []; and push new items with items.push(newItem)

C. Use const items = []; and reassign with items = items.concat(newItem)

D. Use const [items, setItems] = useState([]); and update with items.push(newItem)

Solution

1. Step 1: Understand state immutability in React

   State should not be mutated directly; instead, create a new array with the new item added.

2. Step 2: Check each option's update method

   Use const [items, setItems] = useState([]); and update with setItems([...items, newItem]) uses spread syntax to create a new array and calls setter, which is correct. Options A and D mutate the array directly. Use const items = []; and reassign with items = items.concat(newItem) tries to reassign a const variable.

3. Final Answer:

   Use const [items, setItems] = useState([]); and update with setItems([...items, newItem]) -> Option A

4. Quick Check:

   Update state immutably with setter [OK]

Hint: Always create new array and use setter to update state [OK]

Common Mistakes:

• Mutating state array directly with push
• Reassigning const variables
• Not using setter function to update state