LLearnCode
Academy/React mental models

web · 10 lessons

React mental models

UI is a function of state. Explore renders, ownership, effects, and identity.

What you are working toward

Build predictable components and diagnose rendering bugs.

0 learning steps complete · View prerequisites and evidence →

Engineering sequence

The React mental model

  1. 01UI is a description produced from a state snapshotbeginner · 22 min · predict, experiment, debug, buildunseen
  2. 02Compose small contracts into useful interfacesbeginner · 20 min · predict, experiment, debug, buildunseen

Engineering sequence

State that stays coherent

  1. 03Choose one owner for each factintermediate · 23 min · predict, experiment, debug, buildunseen
  2. 04A form is state, semantics and feedbackintermediate · 22 min · predict, experiment, debug, buildunseen
  3. 05Name events; centralize transitionsintermediate · 24 min · predict, experiment, debug, buildunseen

Engineering sequence

Lifecycles and production reasoning

  1. 06Effects synchronize with something outside Reactadvanced · 26 min · predict, experiment, debug, buildunseen
  2. 07A ref is a stable container; a render is a snapshotadvanced · 24 min · predict, experiment, debug, buildunseen
  3. 08Keys tell React which entity keeps its stateadvanced · 23 min · predict, experiment, debug, buildunseen
  4. 09Measure work before caching itadvanced · 23 min · predict, experiment, debug, buildunseen
  5. 10Test what the user can do across state changesproduction · 26 min · predict, experiment, debug, buildunseen
Open interactive labs →Explore capstones