React Props and Component Composition

1What Are Props in React?

Props (short for properties) are the read-only inputs a parent component passes to a child. They let you configure a component from the outside, so the same component can render different data or behavior depending on what it receives. A Button might take a label prop and an onClick prop, for example.

The crucial rule is that props are immutable inside the receiving component. A child never modifies its own props; it simply reads them to decide what to render. This one-way flow is what makes React data flow predictable — you always know a value came from a parent above.

2Passing and Reading Props

You pass props as attributes in JSX and read them from the function's parameter object. Destructuring keeps the code clean and documents exactly what a component expects.

• function Greeting({ name, excited }) { ... } # destructure props in the parameter
• <Greeting name='Sam' excited={true} /> # pass props like HTML attributes
• excited={true} can be shortened to just excited # boolean shorthand
• <Greeting name={user.firstName} /> # pass any JS expression inside braces

3The Children Prop

The children prop is a special prop containing whatever you place between a component's opening and closing tags. It is the key to building wrapper and layout components that do not need to know their contents in advance.

A Card component can render a border, padding, and shadow, then drop {children} in the middle. Any markup you nest inside <Card>...</Card> appears there. This inverts control: the parent decides the content, the child decides the frame.

• function Card({ children }) { return <div className='card'>{children}</div>; }
• <Card><h2>Title</h2><p>Body text</p></Card> # children is the h2 and p
• children can be text, elements, arrays, or even a function.
• Multiple slots: pass named props like header and footer for more structure.

4Component Composition Patterns

Composition is the practice of building larger UIs by combining smaller components. Instead of one Page component with hundreds of lines, you assemble a Header, Sidebar, and Content that each do one job. Several patterns make composition flexible.

5Prop Drilling and Its Alternatives

Prop drilling happens when you pass a prop through several intermediate components that do not use it, just to reach a deep child. A little drilling is fine and explicit; a lot becomes tedious and fragile.

• Composition first: pass the rendered element down instead of the raw data, so intermediates never touch it.
• Context API: share values like the current theme or user across a subtree without threading props.
• State libraries: reach for tools like Zustand or Redux only when app-wide state grows complex.
• Keep the tree shallow: co-locate state near where it is used to reduce how far anything travels.

6Best Practices

Well-designed props and composition make components a joy to reuse. These habits keep component APIs clean as a codebase grows.

• Keep props minimal and specific; a component with fifteen boolean flags usually wants to be split.
• Prefer composition over configuration — expose slots instead of endless options.
• Name props for intent, not implementation: onSubmit reads better than handleFormButtonClick.
• Treat props as immutable; never mutate an object or array you received.
• Document expected shapes with TypeScript or PropTypes so misuse fails loudly.

7Passing Functions as Props

Props are not limited to data; you can pass functions down so a child can communicate back up. This is how children request changes without owning state, keeping the one-way data flow intact.

A parent passes a callback like onSelect, and the child calls it when something happens. The parent decides what the action means. This pattern, often called lifting state up, keeps shared state in one place while letting many children trigger updates to it.

• <Item onSelect={handleSelect} /> # pass a callback down
• The child calls onSelect(item) on click; the parent updates its state.
• Name callbacks for the event: onSelect, onSubmit, onClose.
• Wrap callbacks in useCallback when passing them to memoized children.

8Key Takeaways

Props and composition are the core of how React apps are structured. A few principles carry most of the value.

• Props are read-only inputs passed from parent to child, flowing one direction down the tree.
• The children prop lets components wrap arbitrary content, powering layouts and containers.
• Composition builds complex UIs from small, focused components instead of monoliths.
• Pass elements as props or children to avoid deep prop drilling before reaching for Context.
• Favor many small components with clear props over one component controlled by many flags.

9Frequently Asked Questions

Q: Can a child component change its props? A: No. Props are read-only inside the child. If a value needs to change, the parent owns that state and passes an updated prop, or it passes a callback the child can call to request a change.

Q: What is the difference between props and state? A: Props are passed in from a parent and are immutable within the component. State is owned and managed by the component itself and can change over time. Props configure a component; state tracks its internal, changing data.

Q: What is prop drilling and is it bad? A: Prop drilling is passing a prop through intermediate components that do not use it to reach a deeper one. A small amount is fine and explicit. Excessive drilling is a signal to use composition or the Context API.

Q: When should I use children versus named props for content? A: Use children for a single primary content region, like the body of a card or modal. Use named props like header or footer when a component has several distinct slots that need to be filled independently.