Question 1

How do I refactor React components 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 subcomponents through a compound component structure, 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 provides shared context and subcomponents access that state via context instead of props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly.

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 needs to 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 use() hook also replaces useContext() and can be called conditionally, unlike useContext.

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 while keeping UI decoupled from state implementation.

vercel-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-composition-patterns

Related Skills

vercel-composition-patterns

react-native-dev

typescript-bindings-patterns

zustand