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.