compound-pattern

To share implicit state across related React components without prop drilling, use the compound component pattern with React Context. A parent component manages the shared state and exposes it to children automatically, ensuring synchronized behavior in coordinated UI widgets like dropdowns and tabs.

The compound component pattern in React is a design approach where a parent component manages shared state via Context and exposes static child components like Parent.Toggle and Parent.List. Use it for coordinated interactive widgets such as dropdowns, tabs, accordions, and menus where subcomponents act together.

Build a React dropdown menu by creating a parent compound component that holds the open or closed state in Context. Attach subcomponents like Toggle and List as static properties on the parent so consumers can compose the UI by nesting children, avoiding manual state wiring through props.

React context components re-render unnecessarily when the context value changes on every render. Optimize them by using memoized context values within the compound component pattern, ensuring that coordinated UI subcomponents only re-render when the shared implicit state actually changes.

Yes, the compound component pattern is ideal for React tabs and accordions. It manages shared implicit state across related subcomponents using Context, allowing multiple children to react to a single internal state for opening and closing without forcing consumers to manually wire props.

Expose static child components on a parent React component by assigning them as properties of the parent, such as Parent.Toggle and Parent.List. This provides a discoverable API for the compound component pattern, letting consumers import only the parent while composing coordinated UI subcomponents.