Render props, compound components, and custom [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) all support reuse and composition, but they solve different problems. The right question is not: ```text Which pattern is best? ``` It is: ```text What exactly am I trying to reuse? ``` ### Render Props Use render props when a reusable component owns behavior but the consumer should decide how the resulting UI is rendered. ```jsx ( )} /> ``` Mental model: ```text Reusable behavior + consumer controls rendering ``` ### Compound Components Use compound components when several related UI pieces need to cooperate under one parent abstraction. ```jsx One Content ``` Mental model: ```text Several related components + shared internal coordination ``` This is particularly useful for design-system components. ### Custom Hooks Use custom [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) when the main goal is sharing stateful logic rather than component structure. ```jsx function Profile() { const user = useCurrentUser(); return

{user.name}

; } ``` Mental model: ```text Reusable behavior without adding UI structure ``` ### Controlled Components The controlled pattern is useful when the consumer needs to own the state of a reusable component. ```jsx ``` Mental model: ```text Reusable UI + state controlled externally ``` ### Uncontrolled Components An uncontrolled API is useful when consumers want the reusable component to manage its own state. ```jsx ``` Mental model: ```text Reusable UI + state controlled internally ``` ### These Patterns Can Be Combined They are not mutually exclusive. A Tabs system could simultaneously use: ```text Compound components → Tabs.Trigger + Tabs.Panel Context → share internal state Controlled pattern → value + onValueChange Uncontrolled pattern → defaultValue Custom Hook internally → organize reusable behavior ``` A mature reusable component often combines several patterns behind one clean public API. ### Example Architecture ```text ↓ Compound component API ↓ useTabsState() ↓ controlled? ├── yes → use value from parent └── no → use internal state ↓ Context shares state ↓ Trigger / Panel coordinate ``` ### Do Not Choose Patterns Just Because They Sound Advanced If simple props are enough: ```jsx ``` there is no need to redesign it as a complex compound-component system. Use patterns when they reduce complexity for consumers, not when they merely make implementation more sophisticated. ### Practical Decision Guide ```text Need reusable stateful logic only? → custom Hook Need consumer-controlled rendering? → render prop may fit Need several related UI pieces? → compound components Need parent to own state? → controlled pattern Need simple self-managed behavior? → uncontrolled pattern Need several of these characteristics? → combine patterns carefully ``` ### Interview-Ready Answer Render props are useful when reusable behavior should expose data while the consumer controls rendering. Compound components work well when multiple related UI parts need shared coordination. Custom Hooks are usually the simplest choice for sharing stateful logic without adding component structure. Controlled and uncontrolled patterns determine whether state is owned externally or internally, and these patterns can be combined in reusable component APIs.