Props down, events up — the one-way street (and the 12-lesson recap) — Visualize

Props down, events up — the one-way street (and the 12-lesson recap)

The Button displays what it’s given and rings the bell it was handed — ownership never moves. Then the whole vertical, in one breath.

💡

THE BIG IDEA

The foundation, saved for last on purpose: props are function arguments travelling down; events are callbacks travelling up; state never leaves its owner. Twelve lines prove it — the child increments nothing, it merely calls the bell its parent manufactured. And because this is the vertical’s final lesson, the closing frame replays all twelve mechanisms as one interview-ready recap.

Move your mouse over any line to see what it does. Hover a loop line and it plays through every repeat. Or press ▶ Play to watch the whole thing. On a phone, tap the arrows.

1function Button({ label, onPress }) {
2  console.log("Button renders:", label);
3  return onPress;
4}
5function App() {
6  let count = 0;
7  const press = Button({
8    label: "Add",
9    onPress: () => { count++; console.log("App owns count:", count); },
10  });
11  press();
12  press();
13}
14App();

●

The last lesson is the first thing every tutorial teaches — props and events. We saved it for the end, because only now does its one sentence carry weight: data flows DOWN, events flow UP, and nothing else is allowed.

Twelve lines: a Button that renders a label it was given and rings a bell it was handed. Watch who owns what.

📦 Memory boxes

what the program is remembering right now

nothing remembered yet

🖥️ What the computer shows

the answers the program prints out

nothing yet ▌

1/8

UP NEXT IN REACT

useRef — the box that changes without redrawing

Mutate it twice, re-render zero times, and prove with === that every render gets the very same box.

useState, built from scratch — where state REALLY lives useRef — the box that changes without redrawing