vercel-composition-patterns

Replace boolean prop mode switches with explicit component variants and compositional structure. Create separate variants like ThreadComposer instead of flags, making component intent self-documenting while eliminating combinatorial UI states and unmaintainable branching.

Lift and decouple state by centralizing state logic in context provider components. Define generic context interfaces for dependency injection so UI components remain implementation-agnostic while cooperating through injected state, actions, and meta.

Use compound components with context providers when building reusable React parts that cooperate through shared state. This pattern suits React 19 codebases designing component APIs where multiple interactive parts share injected state, actions, and meta.

Prefer children over render props for static layout structure to improve readability and natural composition. Use children when the component structure is static, reserving render props only when dynamic rendering logic is truly required.

Yes, the refactoring approach aligns with React 19 API conventions by recommending the use() hook instead of useContext() and treating ref as a regular prop. It supports modern ref and hook conventions for scalable component architecture.