vercel-composition-patterns

Reduce boolean prop proliferation in React by defining explicit variant components, such as ThreadComposer or EditMessageComposer. This strategy replaces complex conditional logic with clear, composable component APIs.

Share state without prop drilling by implementing compound components that lift state into provider components. This architecture enables cross-cut UI access and reuse through a shared context mechanism.

Refactor a React component into explicit variants by creating explicit variant components or providers that utilize a shared context. This architecture enables reusable, composable UI elements under a unified provider.

Yes, this approach aligns with React 19 APIs by using the use() hook instead of useContext and avoiding forwardRef wrappers. It requires creating explicit variant components or providers using a shared context.

Use compound components in React when you need to share state via context without prop drilling and want to build reusable component APIs. This pattern is ideal for scaling component libraries and reducing complex boolean props.