vercel-composition-patterns

Fix React component prop proliferation by adopting compound components and context-driven state management. This approach replaces sprawling boolean props with explicit component variants and shared providers, keeping UI logic separated and maintainable.

Explicit variants in React are self-documenting components like ThreadComposer or EditMessageComposer that encapsulate specific use cases. Use them to replace monolithic UI components and avoid boolean prop combinations that create complex rendering logic.

Share state across React components without prop drilling by using context providers to lift state. Compound components consume this generic context interface—containing state, actions, and meta—to compose UI elements without passing props down manually.

Yes, the composition pattern enforces React 19 API guidance for context providers. You wrap explicit variant components with their corresponding providers to enable shared state and consistent UI across your application.

The best way to refactor a monolithic React component is to break it into explicit variants and compound components. Wrap each variant with a context provider to manage state lifting, eliminating boolean prop sprawl and ensuring scalable composition.

Avoid compound components when building simple, isolated UI elements that do not require shared state or multiple variants. If a component lacks complex state dependencies, introducing context providers and composition patterns adds unnecessary architectural overhead.