Event handlers in client components in NextJS - Step-by-Step Execution

Concept Flow - Event handlers in client components

User action: click/button press

↓

Event handler function triggered

↓

State update or side effect

↓

Component re-renders if state changed

↓

DOM updates to reflect new state

↓

User sees updated UI

When a user interacts with a component, the event handler runs, updates state or triggers effects, causing the component to re-render and update the UI.

Execution Sample

NextJS

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

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

A button that counts how many times it is clicked by updating state on each click.

Execution Table

Step	User Action	State Before	Event Handler Action	State After	Component Re-render	UI Output
1	Page loads	count = 0	No event	count = 0	Initial render	Button shows 'Clicked 0 times'
2	User clicks button	count = 0	setCount(0 + 1)	count = 1	Re-render	Button shows 'Clicked 1 time'
3	User clicks button	count = 1	setCount(1 + 1)	count = 2	Re-render	Button shows 'Clicked 2 times'
4	User clicks button	count = 2	setCount(2 + 1)	count = 3	Re-render	Button shows 'Clicked 3 times'

💡 No more user clicks, so no further state changes or re-renders.

Variable Tracker

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

Key Moments - 3 Insights

Why does the UI update after clicking the button?

Because the event handler calls setCount which updates the state, triggering React to re-render the component with the new count value (see execution_table steps 2-4).

What happens if the event handler does not update state?

The component will not re-render and the UI will not change, as React only updates the DOM when state or props change (see execution_table step 1).

Can the event handler run without user interaction?

No, event handlers run only in response to user actions like clicks or key presses (see execution_table step 1 where no event means no handler run).

Visual Quiz - 3 Questions

Look at the execution table, what is the value of 'count' after the second click?

A 1

B 2

C 3

D 0

💡 Hint

Check the 'State After' column at step 3 in the execution_table.

At which step does the component first re-render?

A Step 2

B Step 1

C Step 3

D Step 4

💡 Hint

Look at the 'Component Re-render' column; the first 'Re-render' (not initial) happens at step 2.

If the event handler did not call setCount, what would the UI show after clicks?

A The button would disappear

B The count would increase normally

C The count would stay at 0

D An error would occur

💡 Hint

Refer to key_moments where state update triggers UI change.

Concept Snapshot

Event handlers in client components:
- Attach functions to UI events like clicks
- Functions run on user action
- Use state setters (e.g., setCount) to update state
- State change triggers component re-render
- UI updates to reflect new state
- Always client-side for interactivity

Full Transcript

This example shows how event handlers work in Next.js client components. When the user clicks the button, the onClick handler runs. It calls setCount to increase the count state by one. React then re-renders the component with the updated count. The button text updates to show the new count. Without state change, the UI would not update. Event handlers only run on user actions like clicks. This flow ensures interactive UI updates smoothly.