> ## Documentation Index > Fetch the complete documentation index at: https://docs.anujpandey.in/llms.txt > Use this file to discover all available pages before exploring further. # Compound components # πŸ“˜ Compound Components in React β€” Complete Theory Guide *** ## 1. πŸ“Œ Introduction ### πŸ”Ή What are Compound Components? **Compound Components** is a design pattern in React where: * Multiple components work together as a **single cohesive unit** * Parent component manages shared state * Child components **implicitly communicate via context or props** πŸ‘‰ In simple terms: > Compound components = a group of components that share logic and state internally but expose a flexible API externally *** ### πŸ”Ή Example (Mental Model) ```js id="cmp1" theme={null} Tab 1 Tab 2 Content 1 Content 2 ``` πŸ‘‰ All components (`Tabs.Tab`, `Tabs.Panel`) work together via shared state. *** ### πŸ”Ή Why is it Important? Without compound components: * You pass a lot of props manually (prop drilling) * UI becomes tightly coupled With compound components: * Clean and expressive API * Implicit communication between components * High flexibility in layout *** ### πŸ”Ή When and Why Do We Use It? Use compound components when: * 🧩 Multiple components need to share state * 🎨 UI structure should be flexible * πŸ”„ You want reusable UI patterns (tabs, dropdowns, accordions) * 🧠 You want **declarative APIs** *** ### πŸ”Ή Real-World Use Cases * Tabs * Accordion * Dropdown/Menu * Modal systems * Form groups *** ## 2. βš™οΈ Concepts / Internal Workings *** ### πŸ”Ή 1. Parent Controls State The parent component: * Holds shared state * Provides it to children ```js id="cmp2" theme={null} const [activeIndex, setActiveIndex] = useState(0); ``` *** ### πŸ”Ή 2. Children Access State Children consume state via: * Context (most common) * Props (less flexible) *** ### πŸ”Ή 3. Context as Backbone Compound components usually rely on **React Context** ```js id="cmp3" theme={null} const TabsContext = createContext(); ``` πŸ‘‰ Why? * Avoid prop drilling * Allow deep nesting *** ### πŸ”Ή 4. Implicit Communication Child components don’t receive explicit props like: ```js id="cmp4" theme={null} // ❌ Not needed ``` Instead: * They derive state from context *** ### πŸ”Ή 5. Component Composition Compound components leverage: > Composition over configuration Instead of: ```js id="cmp5" theme={null} ``` You write: ```js id="cmp6" theme={null} ``` *** ### πŸ”Ή 6. Relationship with Other Patterns | Pattern | Relationship | | ------------------- | ---------------- | | HOC | Structural reuse | | Render Props | Logic sharing | | Hooks | Internal logic | | Compound Components | UI composition | πŸ‘‰ Compound components = **UI-level abstraction** *** ## 3. πŸ§ͺ Syntax & Examples *** ## πŸ”Ή Example 1: Tabs (Core Example) ### Step 1: Create Context ```js id="cmp7" theme={null} const TabsContext = React.createContext(); ``` *** ### Step 2: Parent Component ```js id="cmp8" theme={null} function Tabs({ children }) { const [activeIndex, setActiveIndex] = useState(0); return ( {children} ); } ``` *** ### Step 3: Tab Component ```js id="cmp9" theme={null} function Tab({ index, children }) { const { activeIndex, setActiveIndex } = useContext(TabsContext); return ( ); } ``` *** ### Step 4: Panel Component ```js id="cmp10" theme={null} function Panel({ index, children }) { const { activeIndex } = useContext(TabsContext); return activeIndex === index ?
{children}
: null; } ``` *** ### Step 5: Attach Subcomponents ```js id="cmp11" theme={null} Tabs.Tab = Tab; Tabs.Panel = Panel; ``` *** ### Usage: ```js id="cmp12" theme={null} Tab 1 Tab 2 Content 1 Content 2 ``` *** ## πŸ”Ή Example 2: Accordion ```js id="cmp13" theme={null} function Accordion({ children }) { const [openIndex, setOpenIndex] = useState(null); return ( {children} ); } ``` *** ## πŸ”Ή Example 3: Dropdown ```js id="cmp14" theme={null} ``` *** ## πŸ”Ή Variation: Without Context (Less Flexible) ```js id="cmp15" theme={null} React.Children.map(children, child => React.cloneElement(child, { activeIndex }) ); ``` πŸ‘‰ Works, but: * Harder to scale * Limited nesting *** ## 4. ⚠️ Edge Cases / Common Mistakes *** ### πŸ”Ή 1. Using Component Outside Parent ```js id="cmp16" theme={null} // ❌ outside Tabs ``` ### Problem: * `useContext` returns undefined ### βœ… Fix: ```js id="cmp17" theme={null} if (!context) throw new Error("Must be used within Tabs"); ``` *** ### πŸ”Ή 2. Overusing Context (Performance Issues) * Every context update β†’ re-renders all consumers ### βœ… Fix: * Split contexts * Memoize values *** ### πŸ”Ή 3. Index-Based Logic Bugs ```js id="cmp18" theme={null} index={0} ``` πŸ‘‰ Reordering components breaks logic ### βœ… Fix: * Use stable IDs *** ### πŸ”Ή 4. Implicit Coupling * Children depend on parent context * Hard to reuse independently *** ### πŸ”Ή 5. Too Much Magic * Hidden state flow can confuse developers *** ### πŸ”Ή 6. Incorrect Nesting ```js id="cmp19" theme={null} ``` πŸ‘‰ Order mismatch β†’ incorrect UI *** ### πŸ”Ή 7. Uncontrolled vs Controlled State πŸ‘‰ Sometimes you need both: ```js id="cmp20" theme={null} ``` *** ## 5. βœ… Best Practices *** ### πŸ”Ή 1. Use Context for Shared State βœ” Avoid prop drilling βœ” Enable flexible composition *** ### πŸ”Ή 2. Validate Usage ```js id="cmp21" theme={null} if (!context) { throw new Error("Component must be inside provider"); } ``` *** ### πŸ”Ή 3. Keep API Declarative βœ” Prefer: ```js id="cmp22" theme={null} ``` ❌ Avoid: ```js id="cmp23" theme={null} ``` *** ### πŸ”Ή 4. Support Controlled + Uncontrolled ```js id="cmp24" theme={null} const isControlled = activeIndex !== undefined; ``` *** ### πŸ”Ή 5. Memoize Context Value ```js id="cmp25" theme={null} const value = useMemo(() => ({ activeIndex }), [activeIndex]); ``` *** ### πŸ”Ή 6. Split Contexts for Performance * One for state * One for actions *** ### πŸ”Ή 7. Use Clear Naming ```js id="cmp26" theme={null} Tabs.List Tabs.Item Tabs.Panel ``` *** ### πŸ”Ή 8. Avoid Index-Based Keys βœ” Use unique IDs *** ### πŸ”Ή 9. Provide Defaults * Avoid crashes when props missing *** ### πŸ”Ή 10. Document Component Contracts Explain: * Required structure * Expected usage *** # 🧠 Final Mental Model * Compound components = **collaborative components** * Parent manages state * Children consume state implicitly * Focus on **composition and flexibility** *** ## πŸ”š Key Insight Compound components represent: > The shift from β€œconfiguration-driven UI” β†’ β€œcomposition-driven UI” *** πŸ‘‰ They are widely used in: * UI libraries (e.g., Radix UI, Headless UI) * Design systems *** # 🧠 Senior-Level Conceptual Questions β€” Compound Components (Deep Dive) *** ## 1. What problem do compound components solve that props-based APIs struggle with? ### βœ… Answer Compound components solve **rigidity and prop explosion** in complex UI components. ### πŸ”΄ Problem with props-based APIs: ```js theme={null} ``` * Hard to customize UI structure * Limited flexibility * Requires large configuration objects ### 🟒 Compound Components Solution: ```js theme={null} Tab 1 Content ``` ### πŸ’‘ Why: * Moves from **configuration β†’ composition** * Gives full control over layout ### πŸ” Comparison: | Approach | Limitation | | ------------------- | ---------- | | Props-based | Rigid | | Compound Components | Flexible | *** ## 2. How do compound components work internally in React? ### βœ… Answer They rely on: 1. **Shared state (parent)** 2. **Context API** 3. **Implicit communication** ```js theme={null} const Context = createContext(); function Parent({ children }) { const state = useState(); return {children}; } ``` Children: ```js theme={null} const { value } = useContext(Context); ``` ### πŸ’‘ Why: * Context removes need for prop drilling * Enables deep nesting *** ## 3. Why is Context essential for scalable compound components? ### βœ… Answer Without context: * You must pass props manually β†’ brittle and verbose With context: * Any child can access shared state regardless of depth ### πŸ”΄ Alternative: ```js theme={null} React.cloneElement(child, { value }); ``` ### ❌ Problems: * Only works for direct children * Breaks with nesting ### πŸ’‘ Conclusion: Context enables **true composition flexibility** *** ## 4. What are the main performance concerns with compound components? ### βœ… Answer ### πŸ”΄ Problem: * Context updates β†’ re-render all consumers ### πŸ’‘ Why: React re-renders all components using that context ### 🟒 Solutions: * Split context (state vs actions) * Memoize values ```js theme={null} const value = useMemo(() => ({ active }), [active]); ``` *** ## 5. How do compound components enable inversion of control? ### βœ… Answer Parent: * Manages logic Consumer: * Controls structure and layout ```js theme={null} ``` ### πŸ’‘ Why: * Consumer decides UI * Parent only provides behavior *** ## 6. What are the trade-offs between compound components and render props? ### βœ… Answer | Aspect | Compound Components | Render Props | | ----------- | ------------------- | -------------- | | Readability | Higher | Lower (nested) | | Flexibility | High | Very high | | Performance | Better | Can degrade | | API style | Declarative | Functional | ### πŸ’‘ Insight: * Compound components = better UX for UI composition * Render props = more dynamic but verbose *** ## 7. What are the trade-offs between compound components and hooks? ### βœ… Answer | Aspect | Compound Components | Hooks | | ----------- | ------------------- | -------- | | UI control | High | None | | Logic reuse | Limited | Strong | | Structure | Explicit | Flexible | ### πŸ’‘ Insight: * Hooks handle logic * Compound components handle UI structure πŸ‘‰ Often used together *** ## 8. Why can compound components break when used outside their parent? ### βœ… Answer ```js theme={null} // ❌ ``` ### πŸ”΄ Problem: * No context provider β†’ `undefined` ### πŸ’‘ Why: Context is required for communication ### 🟒 Fix: ```js theme={null} if (!context) throw new Error("Must be inside Tabs"); ``` *** ## 9. What are subtle bugs caused by index-based coordination? ### βœ… Answer ```js theme={null} ``` ### πŸ”΄ Problem: * Reordering breaks mapping ### πŸ’‘ Why: Index is not stable ### 🟒 Fix: * Use unique IDs *** ## 10. How would you design a controlled vs uncontrolled compound component? ### βœ… Answer ```js theme={null} function Tabs({ activeIndex: controlledIndex }) { const [internalIndex, setInternalIndex] = useState(0); const isControlled = controlledIndex !== undefined; const activeIndex = isControlled ? controlledIndex : internalIndex; } ``` ### πŸ’‘ Why: * Allows external control * Improves flexibility *** ## 11. Why can compound components lead to implicit coupling? ### βœ… Answer * Child components depend on context structure * Cannot function independently ### πŸ’‘ Why: Hidden dependency on parent ### Trade-off: * Flexibility vs independence *** ## 12. How do you debug compound component issues in production? ### βœ… Answer Steps: 1. Check context provider presence 2. Inspect context values 3. Verify component hierarchy 4. Add runtime validations ### πŸ’‘ Why: Most bugs come from incorrect structure *** ## 13. How would you design a scalable compound component API? ### βœ… Answer Principles: * Clear naming (`Tabs.List`, `Tabs.Panel`) * Minimal required props * Context-based communication ```js theme={null} ``` *** ## 14. What happens when context value changes frequently? ### βœ… Answer * All consumers re-render ### πŸ’‘ Why: Context triggers updates globally ### 🟒 Fix: * Split contexts * Memoize values *** ## 15. When should you avoid compound components? ### βœ… Answer Avoid when: * Simple UI * No shared state * Performance critical πŸ‘‰ Prefer simple props or hooks *** ## 16. What is the biggest architectural advantage of compound components? ### βœ… Answer πŸ‘‰ **Declarative and flexible UI composition** * Developers control layout * Logic remains centralized *** ## 17. How do compound components handle deeply nested children? ### βœ… Answer Thanks to context: ```js theme={null} ``` ### πŸ’‘ Why: Context works across entire subtree *** ## 18. What are real-world scenarios where compound components shine? ### βœ… Answer * Tabs * Dropdown menus * Modals * Accordions * Design systems ### πŸ’‘ Why: These require: * Shared state * Flexible UI structure *** ## πŸ”š Final Insight At a senior level, compound components are about: * **Designing flexible APIs** * **Balancing abstraction vs clarity** * **Managing shared state efficiently** *** πŸ‘‰ Strong engineers understand: * When to use compound components * When to replace with hooks or simpler patterns * How to avoid performance pitfalls *** # 🧠 Senior-Level MCQs β€” Compound Components (Deep Understanding) *** ## 1. What is the most critical reason compound components rely on Context? ### Options: A. To improve rendering performance B. To avoid prop drilling and enable deep composition C. To replace hooks D. To enforce strict component hierarchy ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Compound components need to share state across deeply nested children. Context enables this without manually passing props. ### ❌ Why others are wrong: * A: Context can hurt performance if misused * C: Hooks and context serve different purposes * D: Context doesn’t enforce hierarchy *** ## 2. What happens if a compound child component is rendered outside its parent? ```js id="q1" theme={null} ``` ### Options: A. React throws compile error B. It works but without state C. Context becomes undefined β†’ runtime issues D. React automatically wraps it ### βœ… Correct Answer: **C** ### πŸ’‘ Explanation: Without a provider, `useContext` returns `undefined`, causing runtime errors. ### ❌ Why others are wrong: * A: No compile-time check * B: Usually crashes or behaves incorrectly * D: React doesn’t auto-wrap *** ## 3. Why is `React.cloneElement` not ideal for scalable compound components? ### Options: A. It is deprecated B. It only works for direct children C. It is slower than context D. It breaks JSX ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: `cloneElement` cannot handle deeply nested children effectively. ### ❌ Why others are wrong: * A: Not deprecated * C: Not the main limitation * D: JSX works fine *** ## 4. What is the biggest performance issue with Context in compound components? ### Options: A. Memory leaks B. All consumers re-render on value change C. Infinite loops D. Blocking rendering ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Any change in context value triggers re-render of all consuming components. ### ❌ Why others are wrong: * A: Not inherent * C: Not typical * D: Incorrect *** ## 5. Why is index-based coordination risky in compound components? ### Options: A. Slows rendering B. Breaks when children reorder C. Causes infinite loops D. Not supported by React ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Indexes are unstable β†’ UI breaks when order changes. ### ❌ Why others are wrong: * A: Not main issue * C: Not related * D: Supported *** ## 6. What is a subtle bug when context value is not memoized? ```js id="q6" theme={null} ``` ### Options: A. Infinite loop B. Unnecessary re-renders C. Memory leak D. Hook violation ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: New object each render β†’ context updates β†’ all consumers re-render. ### ❌ Why others are wrong: * A: No loop * C: Not a leak * D: No hook violation *** ## 7. What architectural advantage do compound components provide? ### Options: A. Faster rendering B. Declarative UI composition C. Smaller bundle size D. Automatic memoization ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: They enable flexible, declarative APIs via composition. ### ❌ Why others are wrong: * A: Not guaranteed * C: Not related * D: Not automatic *** ## 8. Why can compound components lead to implicit coupling? ### Options: A. They share global state B. Child components depend on parent context C. They use hooks D. They are nested ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Children rely on hidden context β†’ tightly coupled with parent. ### ❌ Why others are wrong: * A: Context is scoped * C: Not relevant * D: Nesting alone isn’t the issue *** ## 9. What happens if context provider value changes frequently? ### Options: A. Nothing B. Only parent re-renders C. All consumers re-render D. React skips updates ### βœ… Correct Answer: **C** ### πŸ’‘ Explanation: Context triggers re-render for all consumers. *** ## 10. What is the main difference between compound components and render props? ### Options: A. Render props are faster B. Compound components are more declarative C. Render props cannot share state D. Compound components cannot nest ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Compound components provide cleaner, declarative APIs. *** ## 11. What is a common bug when using compound components with dynamic children? ### Options: A. Hook violation B. State mismatch due to unstable keys C. Memory leak D. Syntax error ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Changing order or keys β†’ state mismatches. *** ## 12. Why is validating context usage important? ### Options: A. Improves performance B. Prevents usage outside provider C. Reduces bundle size D. Required by React ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Prevents runtime errors when used incorrectly. *** ## 13. What is the main drawback of compound components vs hooks? ### Options: A. Cannot share logic B. More structural complexity C. Slower rendering D. Cannot use context ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Requires structured component hierarchy. *** ## 14. What happens when compound components are deeply nested? ### Options: A. Breaks context B. Still works due to context propagation C. Causes memory leak D. Stops rendering ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Context works across entire subtree. *** ## 15. Why should compound components support controlled mode? ### Options: A. Improve performance B. Allow external state control C. Reduce code size D. Avoid context ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Allows parent components to control behavior. *** ## 16. What is a subtle bug when mixing controlled and uncontrolled modes? ### Options: A. Syntax error B. State inconsistency C. Infinite loop D. Memory leak ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Conflicting sources of truth cause inconsistent UI. *** ## 17. Why is splitting context sometimes necessary? ### Options: A. To reduce bundle size B. To reduce unnecessary re-renders C. To support hooks D. To improve syntax ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: Separate state/actions β†’ fewer re-renders. *** ## 18. What is the main reason compound components are popular in design systems? ### Options: A. Faster rendering B. Better UI flexibility and composability C. Smaller codebase D. Easier debugging ### βœ… Correct Answer: **B** ### πŸ’‘ Explanation: They enable flexible UI composition for reusable components. *** # πŸ”š Final Insight These MCQs test: * Context behavior * Performance pitfalls * API design thinking * Real-world edge cases *** πŸ‘‰ Senior-level takeaway: Compound components are about: * **Designing APIs, not just components** * **Balancing flexibility vs complexity** * **Managing shared state efficiently** *** # 🧠 Compound Components β€” Real-World Coding Problems (Senior Level) *** ## 1. 🟑 Tabs System (Basic β†’ Extensible) ### πŸ“Œ Problem Build a `` compound component with `` and ``. ### Constraints * Shared state via context * Flexible ordering of children ### Expected Behavior ```js id="cc1" theme={null} Tab 1 Tab 2 Content 1 Content 2 ``` ### Edge Cases * Tabs without panels * Duplicate IDs * Dynamic tab addition ### πŸͺœ Solution Approach 1. Create context for `activeId` 2. Provide setter in parent 3. Tabs update state 4. Panels render conditionally *** ## 2. 🟑 Accordion (Single/Multiple Expand) ### πŸ“Œ Problem Build `` with ``, `
`, `` ### Constraints * Support both single and multiple open items ### Edge Cases * Toggling same item * Controlled vs uncontrolled ### πŸͺœ Approach * Store open IDs (array or single value) * Context for shared state *** ## 3. 🟠 Dropdown Menu System ### πŸ“Œ Problem Create: ```js id="cc3" theme={null} ``` ### Constraints * Close on outside click * Keyboard navigation ### Edge Cases * Nested dropdowns * Focus management ### πŸͺœ Approach * Track open state * Handle events globally *** ## 4. 🟠 Modal System ### πŸ“Œ Problem Build compound modal API: ```js id="cc4" theme={null} ``` ### Constraints * Support multiple modals * Manage focus trap ### Edge Cases * Escape key * Scroll locking *** ## 5. 🟠 Form Field Group ### πŸ“Œ Problem Build: ```js id="cc5" theme={null} ``` ### Constraints * Validation state shared ### Edge Cases * Async validation * Error priority *** ## 6. πŸ”΄ Stepper / Wizard ### πŸ“Œ Problem Multi-step form navigation ```js id="cc6" theme={null} ``` ### Constraints * Validation before moving forward ### Edge Cases * Skipping steps * Reset flow *** ## 7. πŸ”΄ Menu with Nested Items ### πŸ“Œ Problem Support deeply nested menus ### Constraints * Context should propagate deeply ### Edge Cases * Recursive rendering *** ## 8. πŸ”΄ Tooltip System ### πŸ“Œ Problem Compound tooltip: ```js id="cc8" theme={null} ``` ### Constraints * Positioning logic ### Edge Cases * Hover flickering *** ## 9. πŸ”΄ Tabs with Lazy Loading Panels ### πŸ“Œ Problem Load panel content only when active ### Edge Cases * Switching tabs rapidly ### πŸͺœ Approach * Track visited tabs *** ## 10. πŸ”΄ Data Table with Sorting ### πŸ“Œ Problem ```js id="cc10" theme={null}
``` ### Constraints * Sorting logic centralized ### Edge Cases * Large datasets *** ## 11. πŸ”΄ Notification System ### πŸ“Œ Problem Global notification manager ### Constraints * Add/remove dynamically ### Edge Cases * Auto-dismiss *** ## 12. πŸ”΄ Carousel / Slider ### πŸ“Œ Problem ```js id="cc12" theme={null} ``` ### Constraints * Auto-play * Swipe support *** ## 13. πŸ”΄ Tree View Component ### πŸ“Œ Problem Nested expandable tree ### Edge Cases * Deep recursion * Performance *** ## 14. πŸ”΄ Select / Combobox ### πŸ“Œ Problem Accessible dropdown with search ### Constraints * Keyboard navigation *** ## 15. πŸ”΄ Tabs with Controlled + Uncontrolled Mode ### πŸ“Œ Problem Allow external control: ```js id="cc15" theme={null} ``` ### Edge Cases * Switching modes dynamically *** ## 16. πŸ”΄ Context Split Optimization ### πŸ“Œ Problem Optimize compound component with multiple contexts ### Constraints * Prevent unnecessary re-renders *** ## 17. πŸ”΄ Drag-and-Drop List ### πŸ“Œ Problem Compound draggable list ### Constraints * Reordering *** ## 18. πŸ”΄ Multi-Select Dropdown ### πŸ“Œ Problem Select multiple options ### Edge Cases * Large lists *** ## 19. πŸ”΄ Permission-Based UI Sections ### πŸ“Œ Problem Hide/show components based on roles *** ## πŸ”š Final Insight These problems test: * Context design * API ergonomics * Performance optimization * Real-world UI architecture *** πŸ‘‰ Senior-level expectation: You should: * Design flexible APIs * Handle edge cases * Optimize context usage * Balance abstraction vs usability *** # πŸ› οΈ Senior Code Review β€” Compound Components Debugging Challenges *** ## 1. ❗ Using Child Outside Provider ```js theme={null} function Tab() { const { activeId } = useContext(TabsContext); return
{activeId}
; } // Usage // ❌ outside Tabs ``` ### πŸ” What’s wrong? `Tab` is used outside its context provider. ### πŸ’‘ Why it happens `useContext` returns `undefined` β†’ destructuring fails. ### βœ… Fix ```js theme={null} function Tab() { const context = useContext(TabsContext); if (!context) throw new Error("Tab must be used inside Tabs"); const { activeId } = context; return
{activeId}
; } ``` ### 🧠 Best Practice Always validate context usage. *** ## 2. ❗ Context Value Not Memoized ```js theme={null} ``` ### πŸ” What’s wrong? New object every render. ### πŸ’‘ Why Triggers re-render of all consumers. ### βœ… Fix ```js theme={null} const value = useMemo(() => ({ activeId, setActiveId }), [activeId]); ``` ### 🧠 Best Practice Memoize context values. *** ## 3. ❗ Index-Based Logic Breaks on Reorder ```js theme={null} ``` ### πŸ” What’s wrong? Reordering breaks mapping. ### πŸ’‘ Why Indexes are unstable identifiers. ### βœ… Fix ```js theme={null} ``` ### 🧠 Best Practice Use stable IDs instead of indexes. *** ## 4. ❗ All Consumers Re-render on Any State Change ```js theme={null} const value = { activeId, setActiveId }; ``` ### πŸ” What’s wrong? Every update re-renders all consumers. ### πŸ’‘ Why Single context holds both state and actions. ### βœ… Fix ```js theme={null} const StateContext = createContext(); const ActionsContext = createContext(); ``` ### 🧠 Best Practice Split context for performance. *** ## 5. ❗ Missing Dependency in Effect ```js theme={null} useEffect(() => { setActiveId(props.defaultId); }, []); ``` ### πŸ” What’s wrong? Doesn’t update when `defaultId` changes. ### πŸ’‘ Why Dependency array is incomplete. ### βœ… Fix ```js theme={null} useEffect(() => { setActiveId(props.defaultId); }, [props.defaultId]); ``` *** ## 6. ❗ Incorrect Controlled/Uncontrolled Handling ```js theme={null} const [activeId, setActiveId] = useState(props.activeId); ``` ### πŸ” What’s wrong? State doesn’t update when prop changes. ### πŸ’‘ Why `useState` only runs on initial render. ### βœ… Fix ```js theme={null} const isControlled = props.activeId !== undefined; const activeId = isControlled ? props.activeId : internalState; ``` *** ## 7. ❗ Deeply Nested Components Not Receiving Context ```js theme={null} React.cloneElement(children, { activeId }); ``` ### πŸ” What’s wrong? Only direct children get props. ### πŸ’‘ Why `cloneElement` doesn’t propagate deeply. ### βœ… Fix Use context instead. *** ## 8. ❗ Mutating Context Value ```js theme={null} context.activeId = newId; // ❌ ``` ### πŸ” What’s wrong? Mutates state directly. ### πŸ’‘ Why Breaks React state model. ### βœ… Fix ```js theme={null} setActiveId(newId); ``` *** ## 9. ❗ Conditional Hook Usage ```js theme={null} if (isActive) { const context = useContext(TabsContext); // ❌ } ``` ### πŸ” What’s wrong? Violates Rules of Hooks. ### πŸ’‘ Why Hooks must run consistently. ### βœ… Fix ```js theme={null} const context = useContext(TabsContext); ``` *** ## 10. ❗ Component Order Dependency Bug ```js theme={null} ``` ### πŸ” What’s wrong? UI logic assumes order. ### πŸ’‘ Why Implicit assumptions about structure. ### βœ… Fix Decouple logic from order. *** ## 11. ❗ Expensive Computation in Consumer ```js theme={null} const result = heavyComputation(context.data); ``` ### πŸ” What’s wrong? Runs every render. ### πŸ’‘ Why No memoization. ### βœ… Fix ```js theme={null} const result = useMemo(() => heavyComputation(data), [data]); ``` *** ## 12. ❗ Missing Key in Dynamic Children ```js theme={null} {items.map(item => )} ``` ### πŸ” What’s wrong? Missing `key`. ### πŸ’‘ Why Breaks reconciliation. ### βœ… Fix ```js theme={null} key={item.id} ``` *** ## 13. ❗ Uncontrolled State Reset on Re-render ```js theme={null} const [open, setOpen] = useState(false); ``` ### πŸ” What’s wrong? State resets when parent re-renders with new key. ### πŸ’‘ Why Component remounts. ### βœ… Fix Avoid unnecessary key changes. *** ## 14. ❗ Multiple Providers Causing State Isolation ```js theme={null} ``` ### πŸ” What’s wrong? Nested providers isolate state. ### πŸ’‘ Why Each provider has separate state. ### βœ… Fix Avoid unintended nesting. *** ## 15. ❗ Context Value Changing Too Frequently ```js theme={null} const value = { activeId, timestamp: Date.now() }; ``` ### πŸ” What’s wrong? Always changes β†’ re-renders. ### πŸ’‘ Why New value every render. ### βœ… Fix Remove unstable values. *** ## 16. ❗ Event Handler Recreated Every Render ```js theme={null}