vercel-composition-patterns

Refactor React components by replacing boolean prop proliferation with explicit variants and compound components. This approach uses a provider-based context API to share state, eliminating tangled rendering logic and creating cleaner, self-documenting component interfaces.

The best way to share state without prop drilling is using compound component design with a shared context interface. This pattern splits large UI surfaces into smaller pieces that access state, actions, and meta through an explicit provider boundary.

Update React context usage for React 19 by replacing useContext with the use hook and passing ref as a normal prop instead of using forwardRef. These modern patterns simplify component architecture and clean up ref handling in reusable UI libraries.

Use compound components instead of render props when you need composable children for static structure and a cleaner API design. Compound components provide explicit variants and provider-based context, making component architecture easier to read and maintain.

You can fix unclear React component APIs by replacing multiple boolean modes with explicit, self-documenting variants such as thread, edit, or forward flows. This clears up tangled rendering logic and makes custom actions and previews easier to reuse.