vercel-composition-patterns

To avoid boolean prop proliferation in React components, replace boolean flags with explicit variant components like ThreadComposer or EditMessageComposer. This pattern creates distinct, maintainable component APIs instead of brittle logic driven by multiple overlapping true or false conditions.

The best way to share state across decoupled React components is using context-driven state sharing. By wrapping your UI in shared context providers, you can lift and distribute state without prop drilling, enabling flexible UI composition through compound components.

To use React 19 use() for context access, replace the standard useContext hook with the use() API. This simplifies context usage within your component definitions and allows more flexible integration of context-driven state sharing in your React applications.

You should use compound components in your React library when you need scalable UI composition and explicit variant components. This architecture pattern prevents brittle component APIs by allowing state to be lifted and shared across decoupled components via context providers.

Your React component API becomes brittle with multiple boolean flags because boolean prop proliferation leads to complex and unpredictable component states. Replacing boolean flags with explicit variant components solves this issue by promoting clear, distinct component definitions.