Command Palette

Search for a command to run...

Hectal
Phase 4Beginner5 of 28 in React

State and Events

Make components respond: event handlers, useState, the Rules of Hooks, state as a snapshot, batching, updating objects and arrays, render and commit.

Until now your components showed data that never changed. This phase makes them interactive. You'll handle clicks, typing and form submits with event handlers, and give components state: a memory React keeps between renders, so a counter can count and a menu can open.

Then you'll learn exactly how state behaves, because almost every beginner bug lives here: why a value you just set still looks old (state is a snapshot), why calling a setter three times may add only one (batching), why changing an object or array in place doesn't update the screen (immutability), and why hooks must always be called in the same order (the Rules of Hooks).

The phase ends with the full picture of how React updates the screen: trigger → render → commit. Every live example here clicks its own buttons from code after it loads, so the console proves each behaviour. Click them yourself too.

0/8 · 0%
8 topics ~3 h 25 code blocks & diagrams
Start with the first topic
1
4.1

Responding to Events

You make a component react to the user by passing a function to an event prop such as onClick; React calls that function with an event object when the event happens, and the event bubbles up through parent handlers unless you stop it.

23 min 3 code practice

2
4.2

State: A Component's Memory

useState gives a component a value that React remembers between renders plus a setter function; calling the setter stores a new value and makes React render the component again so the screen shows it.

22 min 3 code practice

3
4.3

The Rules of Hooks

Call hooks only at the top level of a component or a custom hook, never inside conditions, loops, nested functions or after an early return, because React matches each hook to its saved state purely by the order of the calls.

24 min 1 diagram 3 code practice

4
4.4

State as a Snapshot

Each render sees a fixed snapshot of state: the values never change while that render's code (including its event handlers and timers) runs, and calling a setter only asks React for a new render with new values.

21 min 3 code practice

5
4.5

Batching and Updater Functions

React collects all the state updates from one event into a queue and renders once at the end (batching); pass an updater function like setN(n => n + 1) when the next value depends on the previous one, so each update builds on the latest queued value.

22 min 3 code practice

6
4.6

Updating Objects in State

Treat objects in state as read-only: to change one, create a new object (usually with spread { ...obj, field: value }, copying every level you change in nested objects) and pass it to the setter, because React detects changes by comparing references.

21 min 3 code practice

7
4.7

Updating Arrays in State

Arrays in state are read-only too: add, remove, replace, insert, reorder and sort by building a new array with spread, filter, map, slice or the copying methods toSorted and toReversed, and copy any object inside an array before changing it.

22 min 3 code practice

8
4.8

Render and Commit: How React Updates the Screen

Every screen update goes through three steps: something triggers a render (the first mount or a state change), React renders by calling your components to work out what should change, and React commits by touching only the DOM nodes that differ; then the browser paints.

21 min 1 diagram 2 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

A counter with plus, minus and reset

Build a counter. Show the number in a paragraph with id="count", starting at 0.

Beginner
2

Fix the +3 button

The +3 button (id="add3") is supposed to add 3 points by calling the setter three times, but each click adds only 1. The score is shown in id="score".

Beginner
3

Edit a nested object without mutating

The profile state is { name: "Asha", address: { city: "Pune", pin: "411001" } }. The paragraph id="summary" shows Asha lives in Pune (411001).

Beginner
4

A shopping list: add, remove and sort

Build a shopping list. It starts with Rice and Bananas. Each item is an <li> inside <ul id="list">, with its name in a <span className="name"> and a Remove button.

Beginner
5

Mini build: a to-do list with done, delete and clear

Build a to-do list that starts with two to-dos: Learn events (done) and Learn state (not done).

Intermediate