Components, state and the rendering model behind React. Learn why a component is just a function, what a state snapshot really is, and how keys, effects and custom hooks fit together.
React's API is small enough to learn in an afternoon, and that is exactly why it is so often taught badly - as a list of hooks to memorise. The hooks are the easy part. What takes practice is the rendering model underneath them: that a component is a function you can call, that JSX is a call, that useState hands you a snapshot of one render rather than a variable you can read and write, and that React re-runs your function rather than stepping through it. This course follows the order the confusion actually arrives in. You start with a component as a function returning a description of the screen, then data flowing down through props as read-only, then state as a per-render snapshot - which is where most 'React is broken' reports come from. Lists follow, because identity and position are different things and keys are about the first. Then effects, taught as synchronisation with the outside world rather than as a lifecycle callback, which is the distinction that stops the whole category of bug where a computation is put in an effect and arrives one render late. Custom hooks close the loop, and forms finish with the unglamorous work that is actually most of the job. The practice mode is output-predict. React is not one of the runtimes the sandbox can execute, so nothing is run on your behalf: the checks ask you to state what a component prints or renders, and each expected output is pinned to a specific version, because 'what does this print' has no single answer without one. The version assumed throughout is React 19, where every update is batched automatically, plus development-only Strict Mode double-invocation of component bodies and effects. Every prediction below is derived by reading the code, and the reasoning is shown so a disagreement becomes a discussion rather than a shrug.