react-composition

Prop drilling is fixed by passing content as children or slot props to eliminate intermediaries, placing context at the lowest common ancestor for shared state, 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, and consumers should reorder or omit parts. Shared internal state lives in 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 avoid nesting. Use render props when the consumer must control rendering of shared logic. If a render prop only shares state, extract it into a hook.

Context re-renders all consumers when its value changes, so a single app-wide context causes widespread re-renders. Split contexts by update frequency, place providers at the lowest common ancestor, or use selector-based libraries like zustand or use-context-selector.

A component over 300 lines handling multiple concerns is a god component and should be split, while over 500 lines demands refactoring in the current PR. More than 8 props or 6 boolean flags also signals a composition problem.