vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared compound internals such as Composer.Frame, Composer.Input, and Composer.Footer, eliminating hidden conditionals and impossible states.

Compound components are subcomponents sharing a common context, exported as a group like Composer.Provider, Composer.Input, and Composer.Submit. Consumers compose exactly the pieces they need, and subcomponents access shared state via context instead of prop drilling.

Prefer children for composing static structure because they are more readable and compose naturally. Render props remain appropriate when the parent must pass data back to the child, such as a List component providing item and index to renderItem.

React 19 makes ref a regular prop, so the forwardRef wrapper is no longer needed. Function components can accept ref directly in their props, and use() replaces useContext() for reading context, including conditional calls.

Lift state into a provider component that wraps the UI tree. Any component inside the provider boundary, even siblings outside the visual component frame, can access state and actions through context without prop drilling, refs, or useEffect syncing.