Compound components, Providers, custom [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback), and headless components solve different architectural problems, and real [React](/courses/reactjs) components often combine them. The easiest way to choose is to identify what needs to be reused or coordinated. ### Compound Components Choose compound components when several related UI pieces must work together. Example: ```jsx ``` Best fit: ```text Tabs Accordions Menus Selects Carousels Dialogs ``` Mental model: ```text Related UI pieces → coordinated component family ``` ### Provider Pattern Choose a Provider when data or behavior needs to be available across a descendant tree. ```jsx ``` Best fit: ```text Authentication Theme Permissions Localization Feature configuration ``` Mental model: ```text Shared value → many descendants ``` ### Custom Hooks Pattern Choose a custom Hook when you need reusable stateful behavior without adding more component structure. ```jsx const user = useCurrentUser(); const online = useOnlineStatus(); ``` Best fit: ```text API behavior Form behavior Browser subscriptions Storage logic Feature state logic ``` Mental model: ```text Reusable behavior → function components ``` ### Headless Components Choose headless design when you want reusable behavior but consumers should control the visual presentation. ```jsx const menu = useMenu(); ``` or: ```jsx ``` Best fit: ```text Design systems Reusable component libraries Accessible UI primitives Highly customizable applications ``` Mental model: ```text Behavior provided + appearance controlled by consumer ``` ### These Patterns Commonly Work Together Consider a headless Select component. It may use: ```text Custom Hook → selection and keyboard logic Provider → share state between descendants Compound Components → Select.Trigger, Select.Option, Select.Content Headless design → consumer provides styling ``` Conceptually: ```text India ``` The internal implementation might use: ```text Context Refs Keyboard listeners Focus management Positioning Custom Hooks ``` but consumers should not need to understand all of those details. ### Practical Decision Guide ```text Several UI pieces need to cooperate? → Compound Components Many descendants need shared data? → Provider Pattern Need reusable stateful behavior? → Custom Hook Need behavior without fixed styling? → Headless Component Need flexible complex reusable UI? → combine patterns carefully Simple component already works? → keep it simple ``` ### Interview-Ready Answer Use compound components when related UI pieces must coordinate, the Provider Pattern when descendants need shared data, custom [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback) when stateful behavior should be reused without wrappers, and headless components when behavior should be reusable independently from styling. These patterns are often combined in component libraries, but they should only be introduced when they make the public API simpler or more flexible.