react-composition

Prop drilling is fixed by passing content as children to eliminate intermediaries, placing context at the lowest common ancestor of consumers, or fetching data in a Server Component and passing it directly to the client child. Drilling two levels is acceptable and needs no refactor.

Use compound components when a UI has multiple coordinated parts like tabs, accordions, selects, or modals that consumers may reorder or omit. Shared state stays internal via context, and parts are exported as Component.SubComponent for discoverability.

Use a custom hook when sharing logic only, since hooks are cleaner in DevTools and work better with RSC. Use render props when the consumer must control rendering of shared logic, such as custom row rendering in a data table.

Context causes re-renders for all consumers when its value changes, so app-wide state in one context is a bad boundary. Split contexts by update frequency or use selector-based libraries like zustand or use-context-selector to limit re-renders.

A component over 500 lines or with more than six boolean flags should be refactored immediately by splitting concerns and applying the compound pattern. Components with 6-8 clearly named props are acceptable and need no action.