vercel-composition-patterns

You refactor React components by replacing tangled conditional rendering with explicit variant subcomponents and compound component architecture. This eliminates boolean prop proliferation by structuring your API around composable pieces instead of overloaded configuration objects.

Lift state into context providers by establishing a Provider component that manages a shared interface of state, actions, and meta. Sibling UI elements like previews and dialogs can then read and modify this state directly without prop drilling.

Using children instead of render props improves readability and compositional flexibility when building reusable React APIs. This refactor simplifies component interfaces by passing UI structures directly as children rather than through function invocations.

Apply React 19 semantics by replacing forwardRef patterns with direct ref props and switching from useContext() to the use() hook for context reads. This aligns your compound component refactor with modern React 19 data consumption standards.

Use compound components with a shared context contract when sibling or overlay UI elements need to interact through shared state without prop drilling. This approach replaces render props to provide better readability and explicit variant control.