vercel-composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Create separate components like ThreadComposer and EditComposer, each composing only the pieces it needs from a compound component structure.

Compound components are a pattern where a parent component shares state via context with its subcomponents, like Composer.Frame and Composer.Input. Consumers compose exactly the pieces they need without prop drilling or hidden conditionals.

Use children for composing static structure since they are more readable and compose naturally. Reserve render props for cases where the parent must pass data back to the child, such as list item rendering.

React 19 makes ref a regular prop, so forwardRef wrappers are no longer needed. You can also replace useContext() with the use() hook, which additionally supports conditional calls.

Lift state into a provider when sibling components outside the main UI need access to that state or its actions. This avoids prop drilling, useEffect syncing, and ref-based workarounds for cross-component communication.