Potasse

React composition patterns

Vercel Engineering's composition patterns as questions: compound components, providers that own state, explicit variants over boolean props, and React 19's API changes.

Add to library

Try a card

React composition patterns1 of 3

Why are boolean props like isThread, isEditing and isDMThread a poor way to customize a component?

Say it in your head first.

Questions

  1. 01Why are boolean props like isThread, isEditing and isDMThread a poor way to customize a component?
  2. 02Instead of a Composer with an isThread flag, how does composition build a thread composer?
  3. 03What is a compound component?
  4. 04In a compound component, where does a subcomponent like Composer.Input get its state from?
  5. 05In a provider-based component, where should the knowledge of how state is managed live?
  6. 06What does isolating state management in the provider let you change without touching the UI?
  7. 07What three parts make up the generic context interface in these patterns?
  8. 08What's the core principle behind the generic context interface?

…and 11 more cards. The answers are yours to find.