Handling events in React - Step-by-Step Execution

Concept Flow - Handling events in React

User clicks button

↓

React event handler called

↓

Handler updates state

↓

React re-renders component

↓

DOM updates to show new state

When a user clicks a button, React calls the event handler, which updates the state, causing React to re-render the component and update the DOM.

Execution Sample

React

import React, { useState } from 'react';

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

export default ClickCounter;

A button that increases a counter each time it is clicked.

Execution Table

Step	Event	State Before	Action	State After	What Re-renders	DOM Change
1	Initial render	count = 0	Render button with count 0	count = 0	Button component	Button shows 'Clicked 0 times'
2	User clicks button	count = 0	Call onClick handler: setCount(1)	count = 1	Button component	Button updates to 'Clicked 1 times'
3	User clicks button	count = 1	Call onClick handler: setCount(2)	count = 2	Button component	Button updates to 'Clicked 2 times'
4	User clicks button	count = 2	Call onClick handler: setCount(3)	count = 3	Button component	Button updates to 'Clicked 3 times'
5	No more clicks	count = 3	No action	count = 3	No re-render	DOM unchanged

💡 Execution stops when user stops clicking; no further state changes or re-renders occur.

Variable Tracker

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

Key Moments - 3 Insights

Why does the button text update after clicking?

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

What happens if we don't use setCount inside the handler?

The state won't change, so React won't re-render the component, and the button text stays the same (no DOM change in execution_table step 5).

Why do we use an arrow function in onClick?

To define a function that runs only when clicked, not immediately during render. This is shown in the action column where the handler runs on event, not before.

Visual Quiz - 3 Questions

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

A 1

B 3

C 2

D 0

💡 Hint

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

At which step does the DOM update to show 'Clicked 3 times'?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look at the 'DOM Change' column for the text update in the execution_table.

If the onClick handler did not call setCount, what would happen?

A The count would stay the same and no re-render occurs

B The count would increase anyway

C The component would re-render with updated count

D React would throw an error

💡 Hint

Refer to the key_moments explanation about state updates and re-rendering.

Concept Snapshot

Handling events in React:
- Use onClick (or other event) props on elements.
- Pass a function to handle the event.
- Inside handler, update state with setState (e.g., setCount).
- State update triggers re-render.
- Component updates DOM to reflect new state.

Full Transcript

This example shows how React handles events using a button click. When the user clicks the button, React calls the onClick handler function. This function updates the state variable 'count' using setCount. React then re-renders the component with the new count value. The button text updates to show how many times it was clicked. If the handler does not update state, React does not re-render and the button text stays the same. The execution table traces each click event, state before and after, and the resulting DOM changes. This helps beginners see how event handling and state updates work together in React.