Question 1

How do I refactor a React component with too many boolean props?

Accepted Answer

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared compound component pieces, eliminating conditional logic and impossible states.

Question 2

What are compound components in React?

Accepted Answer

Compound components are a pattern where a parent component shares state with subcomponents via context instead of props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly without prop drilling.

Question 3

Should I use children or render props for React composition?

Accepted Answer

Prefer children for composing static structure since 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 wrappers are no longer needed. The guidance also recommends use() instead of useContext(), which can additionally be called conditionally.

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.

vercel-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-composition-patterns

Related Skills

vercel-composition-patterns

react-patterns

standards-enforcement

lang-react