vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components that compose shared internals. Each variant like ThreadComposer or EditComposer declares exactly what it renders, eliminating exponential conditional states.

Compound components are subcomponents sharing a common context, exported as a group like Composer.Frame, Composer.Input, and Composer.Submit. Consumers compose the pieces they need while each subcomponent accesses shared state via context instead of props.

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

No, React 19 makes ref a regular prop, so forwardRef is unnecessary. The guidance also recommends use() instead of useContext(), which additionally supports conditional calls.

Lift state into a provider component so any descendant within the provider boundary can access state and actions via context. Sibling components like dialog buttons or previews can read and modify state without prop drilling or refs.