Fundamentalsbeginner
Props and Component Composition
Learn how data flows into components via props and how composition builds complex UIs from simple pieces.
Props are the mechanism by which a parent component passes data and callbacks down to a child. They are read-only from the child's perspective — a component should never mutate its own props, since React relies on props being immutable inputs to keep rendering predictable.
Props are like ingredients handed to a chef (the component) — the chef can use them to cook a dish but isn't allowed to go back and change what was in the grocery bag.
Key Concepts
1
Composition is the practice of building complex UI by combining small, focused components rather than writing one giant component with many conditional branches. React explicitly favors composition over inheritance; instead of subclassing a Button to make a IconButton, you compose a Button that accepts a children prop or an icon prop.
ButtonIconButtonchildrenicon
2
The children prop deserves special attention: it lets a parent pass arbitrary JSX into a child's designated slot, which is the foundation for layout components, wrappers, and design systems. This pattern shows up constantly in real codebases, for example a Modal component that renders whatever content is passed as children inside its frame.
childrenModal
3
Interviewers like to test whether candidates understand the one-way data flow: data flows down through props, and communication back up to the parent happens via callback props, never by a child reaching into a parent's state directly.