0Pricing
Frontend Academy · Lesson

Compound Components with Context

Share implicit state between a parent component and its designated children using Context, modelling APIs like and .

What Are Compound Components?

Compound components are a set of related components designed to work together as a single unit — like HTML's <select> + <option>. The parent shares implicit state with its specific children.

The Goal: Cleaner APIs

Instead of <Select options={[...]} value={x} onChange={...} />, you write <Select><Option value="a">Apple</Option></Select>. The structure is declarative and JSX-native.

All lessons in this course

  1. Compound Components with Context
  2. Render Props and HOC Patterns
  3. Portals for Modals and Tooltips
  4. Error Boundaries
← Back to Frontend Academy