useState hook introduction in React - Step-by-Step Execution

Concept Flow - useState hook introduction

Component renders

↓

useState called

↓

State variable created with initial value

↓

Component JSX uses state value

↓

User triggers event

↓

setState called with new value

↓

React schedules re-render

↓

Component re-renders with updated state

↓

UI updates to show new state

The component renders and calls useState to create a state variable. When setState is called, React re-renders the component with the updated state, updating the UI.

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 After	Rendered Output
1	Component renders first time	count: undefined	count: 0	<button>0</button>
2	User clicks button	count: 0	count: 0	<button>0</button> (before re-render)
3	setCount called with count + 1	count: 0	count: 1	Scheduled re-render
4	Component re-renders	count: 1	count: 1	<button>1</button>
5	User clicks button again	count: 1	count: 1	<button>1</button> (before re-render)
6	setCount called with count + 1	count: 1	count: 2	Scheduled re-render
7	Component re-renders	count: 2	count: 2	<button>2</button>
8	No more clicks	count: 2	count: 2	No change, UI shows 2

💡 Execution stops when user stops clicking; state remains at last updated value.

Variable Tracker

Variable	Start	After Step 1	After Step 3	After Step 4	After Step 6	After Step 7	Final
count	undefined	0	1	1	2	2	2

Key Moments - 3 Insights

Why does the component re-render after calling setCount?

Calling setCount schedules React to re-render the component with the new state value, as shown between steps 3 and 4 in the execution_table.

Why does the displayed number update only after re-render?

The UI updates only after React re-renders the component with the updated state, so the button shows the new count at steps 4 and 7.

Is the state variable 'count' changed immediately when setCount is called?

No, setCount schedules the update; the state variable changes on the next render, visible in the variable_tracker after re-render steps.

Visual Quiz - 3 Questions

Look at the execution_table at step 4. What is the value of 'count' and what is shown on the button?

A count is 1, button shows 1

B count is 0, button shows 0

C count is 1, button shows 0

D count is 0, button shows 1

💡 Hint

Check the 'State After' and 'Rendered Output' columns at step 4 in the execution_table.

At which step does React schedule a re-render after the user clicks the button?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look for 'Scheduled re-render' in the 'Rendered Output' column in the execution_table.

If the initial useState value was 5 instead of 0, what would be the button label at step 1?

A 0

B 1

C 5

D Undefined

💡 Hint

Refer to the variable_tracker 'After Step 1' value and initial useState value.

Concept Snapshot

useState hook creates a state variable and a setter function.
Syntax: const [state, setState] = useState(initialValue);
Calling setState(newValue) schedules a re-render.
Component re-renders with updated state.
UI updates to reflect new state value.

Full Transcript

The useState hook in React lets you add state to a functional component. When the component first renders, useState sets the state variable to the initial value. The component shows this value in the UI. When the user triggers an event, like clicking a button, the setter function updates the state. React then re-renders the component with the new state value, updating the UI. This process repeats each time the state changes, keeping the UI in sync with the state.

Practice

1. What does the useState hook do in a React component?

easy

A. It fetches data from an external API automatically.

B. It allows the component to remember and update data over time.

C. It styles the component with CSS.

D. It handles routing between pages.

Solution

1. Step 1: Understand the purpose of useState

   The useState hook is designed to let a React component keep track of data that can change.

2. Step 2: Identify what useState does

   It returns the current value and a function to update that value, enabling the component to remember and update data.

3. Final Answer:

   It allows the component to remember and update data over time. -> Option B

4. Quick Check:

   useState manages component data = A [OK]

Hint: useState is for storing and changing data inside components [OK]

Common Mistakes:

• Thinking useState fetches data from APIs
• Confusing useState with styling or routing
• Believing useState automatically updates the UI without calling the setter

2. Which of the following is the correct syntax to declare a state variable count with initial value 0 using useState?

easy

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

B. const count = useState(0);

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

D. const [count, setCount] = useState;

Solution

1. Step 1: Recall useState syntax

   The useState hook returns an array with two elements: the current state and a function to update it, so destructuring with square brackets is needed.

2. Step 2: Check each option

   const [count, setCount] = useState(0); correctly uses array destructuring and calls useState with initial value 0. Others either miss destructuring or call useState incorrectly.

3. Final Answer:

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

4. Quick Check:

   useState returns [value, setter] = C [OK]

Hint: useState returns [value, setter] array, use destructuring [OK]

Common Mistakes:

• Not using array destructuring
• Forgetting to call useState as a function
• Assigning useState to multiple variables without brackets

3. What will be displayed on the screen after clicking the button twice in this component?

import React, { useState } from 'react';

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

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

medium

A. Count: 0

B. Count: 1

C. Count: undefined

D. Count: 2

Solution

1. Step 1: Understand initial state and button action

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

2. Step 2: Calculate count after two clicks

   After first click, count becomes 1. After second click, count becomes 2.

3. Final Answer:

   Count: 2 -> Option D

4. Quick Check:

   Two increments from 0 = 2 [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. Identify the error in this React component using useState:

import React, { useState } from 'react';

function Example() {
  const [value, setValue] = useState;
  return (
    

      
{value}
       setValue('Hello')}>Set
    
  );
}

medium

A. State variable value is not declared.

B. The setter function setValue is missing.

C. useState is not called as a function.

D. The button's onClick handler is invalid.

Solution

1. Step 1: Check useState usage

   The code assigns useState without parentheses, so it is not called as a function, which is required.

2. Step 2: Understand consequences

   Without calling useState(), value and setValue are undefined, causing errors.

3. Final Answer:

   useState is not called as a function. -> Option C

4. Quick Check:

   useState must be called with () = B [OK]

Hint: Always call useState with parentheses: useState() [OK]

Common Mistakes:

• Forgetting parentheses after useState
• Assuming useState is a variable, not a function
• Misreading error as button or variable issue

5. You want to create a toggle button that switches text between "ON" and "OFF" using useState. Which code correctly implements this behavior?

hard

A. const [isOn, setIsOn] = useState(false);
setIsOn(!isOn)}>{isOn ? 'ON' : 'OFF'}

B. const [isOn, setIsOn] = useState('OFF');
setIsOn('ON')}>{isOn}

C. const [isOn, setIsOn] = useState(true);
setIsOn(true)}>{isOn ? 'ON' : 'OFF'}

D. const isOn = false;
isOn = !isOn}>{isOn ? 'ON' : 'OFF'}

Solution

1. Step 1: Understand toggle logic with useState

   To toggle, state must be boolean and updated to its opposite on click.

2. Step 2: Evaluate each option

   const [isOn, setIsOn] = useState(false); setIsOn(!isOn)}>{isOn ? 'ON' : 'OFF'} initializes state as false and toggles it with !isOn, displaying 'ON' or 'OFF' accordingly. Others either don't toggle or misuse state.

3. Final Answer:

   const [isOn, setIsOn] = useState(false); setIsOn(!isOn)}>{isOn ? 'ON' : 'OFF'} -> Option A

4. Quick Check:

   Toggle state by flipping boolean = A [OK]

Hint: Toggle boolean state by setting it to !currentValue [OK]

Common Mistakes:

• Using string state without toggling
• Setting state to same value repeatedly
• Trying to mutate state variable directly