vercel-composition-patterns

Replace boolean props in React components with explicit variants and compound components. This pattern removes fragile conditional logic by creating separate components like ThreadComposer or EditMessageComposer to document distinct behaviors without toggling flags.

Use context providers to lift state management out of UI components. Compound components share this state via generic context interfaces, decoupling the UI from state logic and preventing prop drilling across deeply nested component trees.

Scale React UIs by applying compound components and render props to create flexible, maintainable component libraries. These patterns allow components to share implicit state while keeping the UI focused and reusable.

React 19 introduces API changes that affect context providers and composition patterns. Refactoring strategies must account for these updates when applying compound components and lifting state into providers to ensure scalable component architectures.

Use explicit variants instead of boolean flags when a React component needs to support multiple distinct behaviors. Defining separate components like EditMessageComposer clarifies intended usage and prevents the fragile conditional logic caused by boolean prop proliferation.

Decouple React UI components from state management by lifting state into provider components. Define generic context interfaces to handle state, ensuring UI components remain focused on presentation and reusable across different application contexts.