vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared compound component pieces instead of passing conditional flags to one monolithic component.

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

Prefer children for composing static structure because they are more readable and compose naturally. Use render props only when the parent needs to pass data back to the child, such as rendering list items.

In React 19, ref is a regular prop, so forwardRef is 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 while keeping UI decoupled from state implementation.