> ## 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. # Conditional rendering # πŸ“˜ Conditional Rendering in React β€” Complete Theory Guide *** ## 1. Introduction ### πŸ”Ή What is Conditional Rendering? Conditional rendering in React is the process of **displaying different UI elements based on certain conditions**. Just like JavaScript uses `if`, `else`, or `switch`, React allows you to control **what gets rendered** depending on state, props, or logic. ```jsx theme={null} {isLoggedIn ? : } ``` *** ### πŸ”Ή Why is it Important in React? React is all about **dynamic UI**. Conditional rendering enables: * Personalized user experiences (e.g., logged-in vs logged-out) * Dynamic data-driven UI * Feature toggling (show/hide elements) * Handling async states (loading, success, error) Without conditional rendering, your UI would be static and non-interactive. *** ### πŸ”Ή When and Why We Use It Use conditional rendering when: * Showing/hiding components * Handling API states (loading/error/data) * Rendering based on user roles or permissions * Toggling UI elements (modals, dropdowns) * Avoiding unnecessary DOM elements *** ## 2. Concepts / Internal Workings ### πŸ”Ή Core Concept: React Renders Based on State/Props React re-renders components when: * `state` changes * `props` change Conditional rendering works by: 1. Evaluating a condition 2. Returning different JSX 3. React reconciles differences via the **Virtual DOM** *** ### πŸ”Ή Internal Mechanism (Reconciliation) When a condition changes: ```jsx theme={null} {isVisible && } ``` React: 1. Compares previous Virtual DOM with new one 2. Determines what changed 3. Updates only necessary parts in the real DOM πŸ‘‰ If condition becomes `false`, React **removes the component** πŸ‘‰ If `true`, React **mounts the component** *** ### πŸ”Ή Truthy & Falsy Behavior React uses JavaScript truthiness: | Value | Rendered? | | ----------- | --------- | | `false` | ❌ No | | `null` | ❌ No | | `undefined` | ❌ No | | `0` | βœ… Yes ⚠️ | | `""` | ❌ No | ⚠️ Important: `0 && ` will render `0`, not nothing. *** ### πŸ”Ή Relationship with Other React Features #### 1. useState Controls UI dynamically: ```jsx theme={null} const [isOpen, setIsOpen] = useState(false); ``` #### 2. Props Conditional rendering based on parent data: ```jsx theme={null} {user.isAdmin && } ``` #### 3. Lists & Keys Used with `.map()`: ```jsx theme={null} items.length > 0 ? items.map(...) : ``` #### 4. Hooks & Effects Conditional rendering often depends on async data: ```jsx theme={null} useEffect(() => { fetchData(); }, []); ``` *** ## 3. Syntax & Examples ### πŸ”Ή 1. if / else (Outside JSX) Best for complex logic. ```jsx theme={null} function App() { const isLoggedIn = true; if (isLoggedIn) { return ; } else { return ; } } ``` *** ### πŸ”Ή 2. Ternary Operator (Most Common) Inline condition: ```jsx theme={null} {isLoggedIn ? : } ``` #### Variation: ```jsx theme={null} {isLoading ? : } ``` *** ### πŸ”Ή 3. Logical AND (&&) Render only if condition is true: ```jsx theme={null} {isVisible && } ``` #### Variation: ```jsx theme={null} {items.length > 0 && } ``` *** ### πŸ”Ή 4. Logical OR (||) Fallback rendering: ```jsx theme={null} {username || "Guest"} ``` *** ### πŸ”Ή 5. Switch Case Pattern Used for multiple conditions: ```jsx theme={null} function renderContent(status) { switch (status) { case "loading": return ; case "error": return ; case "success": return ; default: return null; } } ``` *** ### πŸ”Ή 6. Conditional Rendering with Functions ```jsx theme={null} function getButton(role) { if (role === "admin") return ; return ; } return
{getButton(userRole)}
; ``` *** ### πŸ”Ή 7. Rendering Null (Hide Component) ```jsx theme={null} {isHidden ? null : } ``` *** ### πŸ”Ή 8. Inline IIFE (Advanced) ```jsx theme={null} { (() => { if (isLoggedIn) return ; return ; })() } ``` *** ### πŸ”Ή 9. Multiple Conditions ```jsx theme={null} {isLoggedIn && isAdmin && } ``` *** ### πŸ”Ή 10. Conditional CSS (Indirect Rendering) ```jsx theme={null}
``` *** ## 4. Edge Cases / Common Mistakes ### ⚠️ 1. Rendering `0` Accidentally ```jsx theme={null} {items.length && } ``` ❌ If `length = 0`, React renders `0` βœ… Fix: ```jsx theme={null} {items.length > 0 && } ``` *** ### ⚠️ 2. Nested Ternary Hell ```jsx theme={null} {a ? (b ? : ) : } ``` ❌ Hard to read and maintain βœ… Use helper functions or variables *** ### ⚠️ 3. Returning Undefined ```jsx theme={null} if (condition) { return; } ``` ❌ React expects JSX or `null` *** ### ⚠️ 4. Misusing `&&` with Non-Boolean Values ```jsx theme={null} {count && } ``` If `count = 0`, it renders `0` *** ### ⚠️ 5. Component State Reset on Conditional Mount ```jsx theme={null} {isVisible &&
} ``` πŸ‘‰ When hidden, component is **unmounted** πŸ‘‰ State is lost βœ… Solution: * Keep mounted and hide via CSS * Or lift state up *** ### ⚠️ 6. Keys Issue in Conditional Lists ```jsx theme={null} {isVisible && items.map(item => )} ``` ❌ Missing `key` leads to reconciliation bugs *** ### ⚠️ 7. Over-rendering Due to Conditions Frequent condition changes can cause unnecessary re-renders. *** ## 5. Best Practices ### βœ… 1. Prefer Ternary for Simple Conditions ```jsx theme={null} {isLoggedIn ? : } ``` *** ### βœ… 2. Use `&&` for Simple Visibility ```jsx theme={null} {isOpen && } ``` *** ### βœ… 3. Extract Complex Logic ```jsx theme={null} function renderContent() { if (loading) return ; if (error) return ; return ; } ``` *** ### βœ… 4. Avoid Nested Ternaries Use: * Helper functions * Variables * Separate components *** ### βœ… 5. Use Early Returns ```jsx theme={null} if (loading) return ; if (error) return ; return ; ``` *** ### βœ… 6. Be Careful with Truthy/Falsy Values Always explicitly check: ```jsx theme={null} {count > 0 && } ``` *** ### βœ… 7. Optimize Performance * Avoid unnecessary mounts/unmounts * Use `React.memo` for stable components * Use conditional rendering to **avoid heavy components** *** ### βœ… 8. Keep UI Predictable * Avoid flickering states * Handle loading/error explicitly *** ### βœ… 9. Use Consistent Patterns Pick a pattern and stick to it across your codebase. *** ### βœ… 10. Combine with Suspense (Advanced) ```jsx theme={null} }> {isVisible && } ``` *** ## πŸ“Œ Summary Conditional rendering is a **core React concept** that allows you to: * Dynamically control UI * Improve user experience * Optimize performance Mastering it involves: * Understanding JavaScript conditions * Knowing React rendering behavior * Writing clean, maintainable logic *** If you want, next I can create **FAANG-level interview questions on conditional rendering** or a **real-world system design breakdown (like dashboard states, auth flows, etc.)**. # 🧠 Advanced React Interview Questions β€” Conditional Rendering (Senior Level) *** ## 1. How does conditional rendering interact with React’s reconciliation process? ### βœ… Answer Conditional rendering directly impacts **React’s reconciliation (diffing) algorithm**. When a condition changes: ```jsx theme={null} {isVisible && } ``` React compares: * Previous Virtual DOM: `` * New Virtual DOM: `null` ### πŸ” What happens internally: * If condition becomes `false` β†’ component is **unmounted** * If condition becomes `true` β†’ component is **mounted again** ### ❗ Why this matters: * Mount/unmount triggers lifecycle: * Effects cleanup * State reset * Expensive components can hurt performance ### βš–οΈ Alternative: Instead of unmounting: ```jsx theme={null} ``` πŸ‘‰ Keeps component mounted β†’ preserves state πŸ‘‰ Trade-off: DOM still exists (memory cost) *** ## 2. What are the trade-offs between `&&` and ternary (`? :`) for conditional rendering? ### βœ… Answer ### `&&` Operator ```jsx theme={null} {isOpen && } ``` βœ” Clean and concise ❌ Only works for "render or nothing" ❌ Can introduce bugs with falsy values (`0`, `""`) *** ### Ternary Operator ```jsx theme={null} {isOpen ? : null} ``` βœ” Explicit behavior βœ” Supports both branches ❌ Slightly more verbose *** ### πŸ’‘ Key Insight Use: * `&&` β†’ when rendering only on `true` * `? :` β†’ when you need control over both outcomes *** ## 3. Why does React render `0` in `{count && }`? ### βœ… Answer Because React renders **any non-boolean value except `null`, `undefined`, or `false`**. ```jsx theme={null} {0 && } ``` JavaScript evaluates: ```js theme={null} 0 && // returns 0 ``` React then renders `0`. *** ### βœ… Fix ```jsx theme={null} {count > 0 && } ``` ### πŸ” Why this matters This is a **JavaScript behavior**, not React-specific β€” but React exposes it in UI. *** ## 4. How does conditional rendering affect component state? ### βœ… Answer Conditional rendering can **destroy component state** due to unmounting. ```jsx theme={null} {isVisible && } ``` If `isVisible` becomes `false`: * `` is unmounted * All internal state is lost *** ### πŸ” Why this happens React removes the component from the tree β†’ memory cleared. *** ### βš–οΈ Alternatives #### 1. Lift State Up ```jsx theme={null} const [formData, setFormData] = useState({}); ``` #### 2. Keep Component Mounted ```jsx theme={null} ``` *** ### πŸ’‘ Insight Conditional rendering is not just UI β€” it's **lifecycle control**. *** ## 5. What are the performance implications of conditional rendering? ### βœ… Answer Conditional rendering can either: ### πŸš€ Improve performance ```jsx theme={null} {isHeavyVisible && } ``` βœ” Avoids rendering expensive components *** ### 🐌 Hurt performance If toggled frequently: * Mount/unmount cycles * Re-running effects * Recreating DOM nodes *** ### βš–οΈ Trade-off Strategy | Scenario | Approach | | ------------------ | ------------------ | | Rarely shown | Conditional render | | Frequently toggled | Hide with CSS | *** ## 6. How would you handle multiple UI states (loading, error, success) cleanly? ### βœ… Answer Avoid nested ternaries: ```jsx theme={null} {loading ? : error ? : } ``` *** ### βœ… Better Approach ```jsx theme={null} if (loading) return ; if (error) return ; return ; ``` *** ### πŸ’‘ Why? * Improves readability * Easier to debug * Scales better *** ### πŸ” Alternative Pattern ```jsx theme={null} const renderMap = { loading: , error: , success: }; return renderMap[status]; ``` *** ## 7. What problems arise from nested conditional rendering? ### βœ… Answer ```jsx theme={null} {a ? (b ? : ) : } ``` ### ❌ Issues * Hard to read * Difficult to debug * Easy to introduce logic bugs *** ### βœ… Solution Extract logic: ```jsx theme={null} function renderContent() { if (!a) return ; if (b) return ; return ; } ``` *** ### πŸ’‘ Insight Readable code is **more important than clever code**. *** ## 8. How does conditional rendering interact with keys in lists? ### βœ… Answer Incorrect conditional logic can break reconciliation: ```jsx theme={null} {isVisible && items.map(item => )} ``` Without keys: * React cannot track identity * Leads to incorrect DOM updates *** ### βœ… Correct ```jsx theme={null} {isVisible && items.map(item => ) } ``` *** ### πŸ” Why? Keys help React: * Match old vs new elements * Avoid unnecessary re-renders *** ## 9. What is the difference between returning `null` and not rendering a component? ### βœ… Answer ```jsx theme={null} return null; ``` βœ” Component renders nothing βœ” Lifecycle still runs *** ### ❗ Important Distinction | Case | Behavior | | ------------------ | -------------------------- | | `return null` | Component exists, no UI | | Conditional render | Component removed entirely | *** ### πŸ’‘ Why this matters * `useEffect` still runs with `null` * Useful for logic-only components *** ## 10. How would you conditionally render components without causing layout shifts? ### βœ… Answer Frequent mount/unmount can cause **layout shifts (CLS issues)**. *** ### βœ… Solutions #### 1. Reserve space ```jsx theme={null}
{isLoading ? : }
``` #### 2. Skeleton loaders ```jsx theme={null} {isLoading ? : } ``` *** ### πŸ’‘ Why? Improves UX and avoids visual jank. *** ## 11. How does conditional rendering work with Suspense and lazy loading? ### βœ… Answer ```jsx theme={null} }> {isVisible && } ``` *** ### πŸ” Behavior * Component loads only when condition is true * Suspense handles loading fallback *** ### βš–οΈ Trade-off * Lazy loading reduces bundle size * But introduces loading delay *** ## 12. When should you avoid conditional rendering entirely? ### βœ… Answer Avoid when: * UI structure remains constant * Only styles/visibility change *** ### ❌ Example ```jsx theme={null} {isActive ? ``` *** # πŸ“Œ Final Takeaways These problems test: * **Component lifecycle awareness** * **State persistence vs unmounting** * **Performance optimization** * **Readable conditional patterns** * **Real-world UI complexity** *** # πŸ› Advanced Debugging Challenges β€” Conditional Rendering in React (Senior Level) *** ## 🧩 1. Rendering `0` Instead of Nothing ### ❌ Buggy Code ```jsx theme={null} {items.length && } ``` ### πŸ” What’s Wrong? When `items.length === 0`, React renders `0`. ### πŸ’‘ Why It Happens * `0 && ` evaluates to `0` * React renders numbers ### βœ… Fixed Code ```jsx theme={null} {items.length > 0 && } ``` ### 🧠 Best Practice Always explicitly check numeric conditions. *** ## 🧩 2. State Reset on Toggle ### ❌ Buggy Code ```jsx theme={null} {isOpen && } ``` ### πŸ” What’s Wrong? Form input resets when toggled. ### πŸ’‘ Why It Happens Component is unmounted β†’ state lost. ### βœ… Fixed Code ```jsx theme={null} ``` ### 🧠 Best Practice Avoid unmounting when state persistence is needed. *** ## 🧩 3. Nested Ternary Logic Bug ### ❌ Buggy Code ```jsx theme={null} {isAdmin ? isActive ? : : } ``` ### πŸ” What’s Wrong? Hard to reason; easy to misinterpret logic. ### πŸ’‘ Why It Happens Nested ternaries reduce readability β†’ bugs slip in. ### βœ… Fixed Code ```jsx theme={null} if (!isAdmin) return ; return isActive ? : ; ``` ### 🧠 Best Practice Avoid nested ternaries beyond one level. *** ## 🧩 4. Component Re-Mount Performance Issue ### ❌ Buggy Code ```jsx theme={null} {showChart && } ``` ### πŸ” What’s Wrong? Chart re-initializes on every toggle. ### πŸ’‘ Why It Happens Unmount β†’ remount β†’ expensive setup runs again. ### βœ… Fixed Code ```jsx theme={null}