Props, State, and the Component Lifecycle

Components need two kinds of data: props, the inputs passed in from a parent, and state, the data a component owns and can change over time. Props make components configurable and reusable; state makes them interactive. Knowing which data belongs in props versus state, and how each triggers rendering, is fundamental to building anything beyond a static page.

Props are read-only — a component receives them and must not modify them — while state is private to a component and updated through a setter that tells React to re-render. When either props or state change, React re-runs the component to produce updated UI. This is the engine of interactivity: change the data, and the screen follows.

Components also have a lifecycle: they mount (appear), update (re-render as data changes), and unmount (are removed). In modern function components this lifecycle is expressed through rendering and effects rather than the old class lifecycle methods. This lesson covers props, state with useState, and how the render-driven lifecycle works in React 19.

Analogy🏏Cricket

🏏 Think of it like cricket: Just as a captain sketches the desired field on a planning board first, then compares it to the current field to move only the fielders who need to shift — rather than clearing the ground and re-placing all eleven — React builds a new Virtual DOM plan, diffs it against the old, and moves only what changed. The insight is that planning on paper and adjusting the minimum is far cheaper than rearranging everything from scratch, which is exactly what reconciliation achieves.