compound-pattern

Create a parent component that holds state and provides it through React Context, then attach child components as static properties like FlyOut.Toggle and FlyOut.List. Children consume the shared state with useContext, so consumers never manage state themselves.

Use it when building related components like dropdowns, tabs, or menus that share meaningful state and need a clean API without exposing internal state management. Avoid it for simple one-off UIs where a single component with props is clearer.

Context API lets any nested descendant access shared state, while React.Children.map with cloneElement only passes props to direct children. Cloning also shallow-merges props, which can cause naming collisions with existing props.

This happens with the React.Children.map approach because only direct children receive the cloned props. Wrapping children in another element cuts off access to open and toggle. Switch to the Context API approach to support flexible nesting.

Memoize the context value passed to the provider so consumers only re-render when the actual state changes. This matters in complex scenarios where the parent re-renders frequently but the shared state stays stable.