Question 1

How do I refactor React components with too many boolean props?

Accepted Answer

Replace boolean props with explicit variant components that compose shared internals. Each variant like ThreadComposer or EditComposer declares exactly what it renders, eliminating hidden conditionals and impossible states.

Question 2

What are compound components in React?

Accepted Answer

Compound components are a set of subcomponents sharing state through a common context, exported together like Composer.Frame, Composer.Input, and Composer.Submit. Consumers compose only the pieces they need without prop drilling.

Question 3

Should I use children or render props for React composition?

Accepted Answer

Prefer children for composing static structure because they are more readable and compose naturally. Use render props only when the parent must pass data back to the child, such as rendering list items.

Question 4

Does forwardRef still work in React 19?

Accepted Answer

React 19 makes ref a regular prop, so forwardRef is no longer needed. Accept ref directly in the component props and pass it to the underlying element, and use use() instead of useContext for reading context.

Question 5

When should I lift state into a provider component?

Accepted Answer

Lift state into a provider when sibling components outside the main UI need access to that state or its actions. This avoids prop drilling, useEffect syncing, and ref-based workarounds for sharing state across boundaries.

vercel-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-composition-patterns

Related Skills

vercel-composition-patterns

vercel-composition-patterns

typescript-strict

state-management