State and hooks in client components in NextJS - Step-by-Step Execution

Concept Flow - State and hooks in client components

Component Render Start

↓

useState Hook Called

↓

State Variable Initialized

↓

JSX Rendered with State Value

↓

User Clicks Button

↓

setState Called

↓

Component Re-renders

↓

Updated State Value Shown

↓

End

The component renders, initializes state with useState, shows it in JSX, then updates state on user action causing re-render with new state.

Execution Sample

NextJS

'use client';
import { useState } from 'react';

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

A button shows a count starting at 0 and increments by 1 each time it is clicked.

Execution Table

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

💡 Execution stops when user stops clicking; state remains stable and UI shows latest count.

Variable Tracker

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

Key Moments - 3 Insights

Why does the component re-render after setCount is called?

Calling setCount updates the state variable 'count', which tells React to re-render the component to show the new state value, as seen in steps 2 and 3 of the execution_table.

Why is the initial state value 0 and not undefined?

The useState hook initializes 'count' to 0 on the first render, as shown in step 1 where useState(0) sets count to 0.

Does the component re-render if setCount is not called?

No, the component only re-renders when state changes. Steps 3 and 5 show re-renders after state updates, but no re-render happens without setCount.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 2?

A 1

B 0

C 2

D undefined

💡 Hint

Check the 'State After' column for step 2 in the execution_table.

At which step does the component first render with count equal to 2?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look at the 'Rendered Output' column and find when 'Count: 2' appears.

If the user never clicks the button, what will the final rendered output be?

A Count: 1

B Count: 0

C Count: undefined

D No output

💡 Hint

Refer to step 1 and step 6 in the execution_table for initial and final render states.

Concept Snapshot

useState hook creates a state variable and setter.
Initial state is set on first render.
Calling setter updates state and triggers re-render.
Component shows latest state in JSX.
User actions can call setter to change state.
Re-render updates UI with new state value.

Full Transcript

This example shows a Next.js client component using the useState hook to manage a count variable. Initially, the count is set to 0. The component renders a button displaying the current count. When the user clicks the button, the setCount function updates the count by adding 1. This triggers React to re-render the component, showing the updated count. The execution table traces each step: initial render, user clicks, state updates, and re-renders. The variable tracker shows how 'count' changes from undefined to 0, then increments with each click. Key moments clarify why re-renders happen and how initial state is set. The visual quiz tests understanding of state values at different steps and the effect of user interaction. This teaches how state and hooks work together to create interactive client components in Next.js.

Practice

1. What is the main purpose of using useState in a Next.js client component?

easy

A. To fetch data from the server before rendering

B. To store and update data that changes over time within the component

C. To style the component dynamically

D. To navigate between pages automatically

Solution

1. Step 1: Understand what useState does

   useState is a React hook that allows components to keep track of data that can change, like user input or toggles.

2. Step 2: Identify the purpose in Next.js client components

   In Next.js client components, useState helps remember and update values without reloading the page.

3. Final Answer:

   To store and update data that changes over time within the component -> Option B

4. Quick Check:

   State = Remember and update data [OK]

Hint: Remember: useState stores changing data inside components [OK]

Common Mistakes:

• Thinking useState fetches server data
• Confusing useState with styling or navigation
• Forgetting useState only works in client components

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

easy

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

B. const count = useState(0);

C. let count = useState(0);

D. const count = useState()[0];

Solution

1. Step 1: Recall the syntax of useState hook

   The correct syntax uses array destructuring: const [state, setState] = useState(initialValue);

2. Step 2: Match the syntax with the variable name and initial value

   For count starting at 0, it should be const [count, setCount] = useState(0);

3. Final Answer:

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

4. Quick Check:

   useState syntax = [state, setState] [OK]

Hint: Use array destructuring: [value, setValue] = useState() [OK]

Common Mistakes:

• Assigning useState directly to a single variable
• Using let instead of const for state
• Not using array destructuring syntax

3. Consider this Next.js client component code:

"use client";
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
     setCount(count + 1)}>
      Count: {count}
    
  );
}

What will be displayed after clicking the button three times?

medium

A. Count: 0

B. Count: 1

C. Count: 3

D. Count: undefined

Solution

1. Step 1: Understand initial state and button click effect

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

2. Step 2: Calculate count after three clicks

   After 1 click: count = 1
   After 2 clicks: count = 2
   After 3 clicks: count = 3

3. Final Answer:

   Count: 3 -> Option C

4. Quick Check:

   Increment count 3 times = 3 [OK]

Hint: Each click adds 1 to count state [OK]

Common Mistakes:

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

4. What is wrong with this Next.js client component code?

import { useState } from 'react';

export default function Toggle() {
  const [isOn, setIsOn] = useState(false);
  return (
     setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    
  );
}

medium

A. State variable should be declared with let

B. Incorrect use of useState syntax

C. Button onClick handler is invalid

D. Missing 'use client'; directive at the top

Solution

1. Step 1: Check for client component requirement

   Hooks like useState require the component to be a client component, which needs 'use client'; at the top.

2. Step 2: Verify code for missing directive

   The code lacks 'use client'; at the top, so it will cause an error in Next.js.

3. Final Answer:

   Missing 'use client'; directive at the top -> Option D

4. Quick Check:

   Client components need 'use client' [OK]

Hint: Always add 'use client'; on top when using hooks [OK]

Common Mistakes:

• Forgetting 'use client' directive
• Thinking useState syntax is wrong
• Assuming onClick handler is invalid

5. You want to create a Next.js client component that toggles between showing and hiding a message when a button is clicked. Which code snippet correctly implements this behavior?

hard

A. "use client";
import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(!visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

B. "use client";
import { useState } from 'react';

export default function ShowHide() {
const visible = false;
return (
<>
(visible = !visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

C. import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(!visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

D. "use client";
import { useState } from 'react';

export default function ShowHide() {
const [visible, setVisible] = useState(false);
return (
<>
setVisible(visible)}>
{visible ? 'Hide' : 'Show'} Message

{visible && Hello, this is the message!}
</>
);
}

Solution

1. Step 1: Check for 'use client' directive and useState usage

   "use client"; import { useState } from 'react'; export default function ShowHide() { const [visible, setVisible] = useState(false); return ( <> setVisible(!visible)}> {visible ? 'Hide' : 'Show'} Message {visible &&

   Hello, this is the message!

   } </> ); } correctly includes 'use client'; and uses useState to track visibility state.

2. Step 2: Verify toggle logic and rendering

   The button toggles visible state with setVisible(!visible), and the message shows only when visible is true.

3. Final Answer:

   Option A code snippet correctly implements the toggle behavior -> Option A

4. Quick Check:

   Toggle state with useState and 'use client' [OK]

Hint: Use useState and 'use client'; toggle with setVisible(!visible) [OK]

Common Mistakes:

• Not adding 'use client' directive
• Trying to change state variable directly
• Passing current state to setter without toggling