Props & Composition
The problem
A reusable component is only useful if it can be configured differently in different places — props are the mechanism for passing data into a component from its caller, and composition is how large UIs get built entirely out of smaller, independently reusable pieces.
Why now
Components and JSX established the component-as-function idea; props are exactly a function's parameters, applied to that idea — and function composition (already covered as a general concept) is what lets components nest inside other components to build arbitrarily complex UI from simple, independently testable parts.
Mental model
Props are just function arguments with a friendlier name — read-only inputs a component receives and cannot modify. Composition means a component's output can include other components, which is why a UI tree in React mirrors a call tree: a page component calls a layout component, which calls a card component, which calls a button component.
Requires
- Components & JSXReact
Props are specifically the parameters passed into a component function already defined by components-and-jsx; you need the component-as-function model before 'props' has a concrete referent.
- Functions & ScopeProgramming Fundamentals
Props are literally function parameters — the same pass-by-value-or-reference argument-passing rules from functions-and-scope apply directly, including why mutating a prop object is discouraged.
Unlocks
Used in
- Every component's public interface — how a parent configures a child's behavior and appearance
- children as a special prop enabling wrapper/layout components
- Component libraries whose entire API surface is a well-designed set of props
- Prop-types/TypeScript prop typing, treating props as a strict function signature
Projects
- Build a reusable Card component accepting title, children, and an optional footer prop, then compose several differently-configured instances of it
- Refactor a single large component with duplicated markup into smaller composed components communicating purely through props
Examples
- <Button variant="primary" onClick={handleSave}>Save</Button> passes three props — a string, a function, and implicit children
- A Layout component that renders {children} lets any content be wrapped without Layout knowing what that content is in advance
Resources
Mastery checklist
- I can explain props as read-only function parameters passed from parent to child
- I can use the children prop to build a wrapper/layout component
- I can decompose a large component into smaller, composed components using props
- I can explain why mutating a prop directly is discouraged