vercel-composition-patterns

To refactor React components and avoid boolean prop proliferation, replace mode flags with explicit variants like ThreadComposer and EditMessageComposer, using compound components and context providers to share state without prop drilling.

The best way to use compound components in React 19 is injecting state through context providers and reading them with the use() hook instead of useContext(), allowing sibling UI parts to share state cleanly without prop bloat.

To replace render props with children composition in React, prefer natural JSX children for static UI structure and lift shared state into context providers, eliminating deeply nested boolean flags and conditional rendering logic.

Tangled conditional rendering in React design systems happens when single components handle too many modes via boolean props, which can be solved by refactoring into explicit variants and dependency-injected composition models.

Yes, you can use context providers instead of prop drilling by lifting state into a provider component, allowing sibling dialogs, previews, and action buttons to participate cleanly in shared state without passing props deeply.

React 19 does not require forwardRef for passing refs to child components, as ref can now be passed as a regular prop, simplifying component architectures when refactoring to compound components and context-driven state.