Good composition patterns make reusable components easier to understand and customize without forcing consumers to understand complicated internal implementation details. ### 1. Prefer Simple Props Before Advanced Patterns Start with the simplest API that solves the problem. ```jsx ``` is better than introducing Context, render props, and compound components when they provide no meaningful benefit. ### 2. Use Composition Instead of Large Configuration Objects When Structure Matters Instead of: ```jsx ``` a compositional API may be more flexible: ```jsx ``` Use this when consumers genuinely need structural flexibility. ### 3. Keep Shared State Close to the Compound Component If only Tabs components need `activeTab`, avoid putting that state in unrelated global state. ```text Tabs state → Tabs provider ``` rather than: ```text Tabs state → global application store ``` without a real reason. ### 4. Make Controlled and Uncontrolled APIs Predictable A common convention is: ```text value + onValueChange → controlled defaultValue → uncontrolled ``` For open state: ```text open + onOpenChange → controlled defaultOpen → uncontrolled ``` Predictable naming makes reusable APIs easier to learn. ### 5. Avoid Prop Conflicts If a component supports both controlled and uncontrolled modes, define exactly which value wins. For example, when `value` is provided: ```text parent owns current value ``` and `defaultValue` should only initialize uncontrolled state. Do not create ambiguous behavior where both continuously compete. ### 6. Keep Context Internal When It Is an Implementation Detail A compound Tabs component might use Context internally: ```jsx const TabsContext = createContext(null); ``` Consumers should ideally interact with: ```jsx ``` instead of manually depending on internal context details. This gives the implementation room to change later. ### 7. Provide Helpful Errors for Misuse If a child must be inside its parent, an internal Hook can validate that: ```jsx function useTabsContext() { const context = useContext(TabsContext); if (!context) { throw new Error( "Tabs components must be used inside ." ); } return context; } ``` This is easier to debug than failing later with an unclear `undefined` error. ### 8. Use Render Props When Rendering Flexibility Is the Requirement Do not use render props simply to share ordinary logic that a custom Hook could expose more clearly. Good reason: ```text Consumer must decide the rendered content based on internal component state ``` Less compelling reason: ```text We just need the current user object ``` For the second case, a custom Hook may be simpler. ### 9. Avoid Deep Nesting Composition should simplify code rather than creating structures such as: ```jsx {() => ( {() => ( {() => } )} )} ``` If behavior can be expressed more clearly with [Hooks](/courses/reactjs/chapter-11-advanced-hooks-useref-usereducer-usememo-usecallback), prefer the flatter design. ### 10. Preserve Accessibility Inside Reusable Patterns Components such as: ```text Tabs Menus Accordions Selects Dialogs ``` are not only state-management problems. A reusable pattern should also manage appropriate: ```text Keyboard navigation Focus ARIA relationships Semantic elements ``` when those behaviors belong to the component. ### Practical Mental Model ```text Simple problem? → simple props Need flexible child structure? → composition Related UI pieces cooperate? → compound components Consumer controls rendering? → render props Reusable behavior only? → custom Hook Parent needs state control? → controlled API Simple self-contained usage? → uncontrolled API ``` ### Interview-Ready Answer Good [React](/courses/reactjs) composition starts with the simplest useful API and introduces patterns only when they improve flexibility or reuse. Compound components work well for coordinated UI structures, render props provide consumer-controlled rendering, and controlled/uncontrolled APIs make state ownership explicit. Reusable components should keep internal implementation details private, provide predictable contracts, and include accessibility behavior appropriate to the UI.