Command Palette

Search for a command to run...

Hectal
Phase 6Intermediate7 of 28 in React

Managing State

Shape state so bugs can't happen: no contradictions or copies, derive what you can, lift shared state, reset with keys, and put each piece where it belongs.

By now you can give a component memory with useState, update objects and arrays, and build forms. As an app grows, the hard question is no longer *how* to store state but *what* to store and *where*. Most React bugs in real projects are state-shape bugs: two values that disagree, a copy that went stale, a number stored that should have been calculated, a value kept in the wrong component.

This phase gives you the rules that experienced React developers follow without thinking. You'll learn to choose a state structure with no room for contradictions, to compute values during render instead of storing them, to lift state up so two components share it, and to control exactly when React keeps or throws away a component's state, including the key trick for resetting a form.

You'll finish with one-way data flow (props down, events up) and a checklist for deciding where every piece of state should live: in one component, in a shared parent, in the URL, in a form, or in a server-data cache. Effects are not needed for any of it; they come in Phase 7.

0/6 · 0%
6 topics ~2 h 22 code blocks & diagrams
Start with the first topic
1
6.1

Choosing the State Structure

Good state has no room for bugs: group values that change together, replace clashing booleans with one status, don't store what you can calculate, don't keep copies of data you already have (store its id), and keep nested data flat.

24 min 3 code practice

2
6.2

Derived Values: Compute, Don't Store

If a value can be calculated from props or state, calculate it during render instead of storing it; copying a prop into state freezes it at its first value, which is fine only when the prop is meant as a starting value.

24 min 4 code practice

3
6.3

Lifting State Up

When two components must show or change the same data, move that state up to their closest common parent and pass it down as props, with callbacks so the children can ask for changes; a component driven by props this way is called controlled.

24 min 4 code practice

4
6.4

Preserving and Resetting State

React keeps a component's state as long as the same component type is rendered at the same position in the tree; a different type or a removed component throws the state away, and changing a component's key resets it on purpose.

29 min 5 code practice

5
6.5

One-Way Data Flow: Props Down, Events Up

In React, data travels one way: parents pass values down as props, and children report events up by calling callback props; siblings talk through their shared parent, and passing props through many layers that don't use them is called prop drilling.

23 min 3 code practice

6
6.6

Where Each Piece of State Should Live

Keep state as close as possible to the components that use it (colocation), lift it only as far as needed to share it, and recognise the special kinds that belong elsewhere: server data in a cache, shareable UI in the URL, and form drafts in the form.

24 min 3 code practice

Practise this phase

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

1

An accordion with one panel open

Each panel below keeps its own isActive state, so several can be open at once. Lift the state up so that exactly one panel is open at a time.

Intermediate
2

Fix the cart total by deriving it

This cart stores total and count in state next to the items. Adding works, but removing an item leaves the total and the count wrong.

Intermediate
3

Keep the selection in sync: store the id

Each row has a name box (.name) and a Choose button (.choose). The line #selected shows Selected: <name>.

Intermediate
4

A fresh draft for each contact

In this messenger, a draft typed for one contact stays in the box when you switch to another, so you might send it to the wrong person.

Intermediate
5

Mini build: a packing list

Build a packing list from three components that share state through their parent, App: a form AddItem, a list PackingList, and a summary Stats.

Intermediate