vercel-composition-patterns

Refactor React components by replacing boolean props with explicit variants (like ThreadComposer) and compound components. This resolves boolean prop proliferation by creating self-descriptive APIs and enforcing consistent architecture across your UI library.

The best way to manage shared state without prop drilling is by lifting state into provider components. This allows compound components to access cross-component state directly through shared context, ensuring reusability and flexible API boundaries.

Adopt React 19 APIs by using the use() hook instead of useContext for state lifting and passing regular props for refs instead of forwardRef. This modernizes compound components and enforces scalable context architecture.

Use explicit variants when a React component library needs to handle multiple distinct UI states. Creating variants like EditMessageComposer and ForwardMessageComposer keeps code self-descriptive, avoiding conditional rendering complexity and improving maintainability.

No, applying compound components with shared context requires zero external dependencies. It relies entirely on native React patterns and React 19 APIs to enforce consistent architecture and resolve boolean prop proliferation.

Scale React component APIs by building flexible boundaries with compound components and shared context providers. This architecture replaces boolean prop proliferation with explicit variants, enabling robust reuse across large component libraries.