How Does Conditional Rendering Work in React?
Learn how conditional rendering works in React using ternary, logical &&, if statements and null, plus the 0 pitfall and loading and empty state patterns.
Expected Interview Answer
Conditional rendering in React means showing different UI based on state or props by using ordinary JavaScript expressions like if statements, ternary operators, or logical && inside JSX.
React does not have special template directives; you decide what to render using JavaScript. Common patterns are the ternary condition ? a : b for either/or UI, the logical value && element to render something only when a condition is true, early returns for whole-component branches, and returning null to render nothing. A key gotcha is that && with a numeric 0 renders the 0 on screen, so guard with a boolean.
- Shows the right UI for each state
- Uses plain JavaScript, nothing new to learn
- Keeps components declarative
- Supports loading, empty, and error states cleanly
- Lets you render nothing with null
AI Mentor Explanation
Think of a scoreboard operator who displays 'Batting' or 'All Out' depending on the match state, choosing the sign based on the current situation. Conditional rendering works the same way — React checks the state and picks which UI to show, exactly like the operator picking the right board.
Step-by-Step Explanation
Step 1
Identify the condition
Pick the state or prop that decides which UI variant should appear.
Step 2
Choose a pattern
Use a ternary for either/or, && for show-if-true, or an early return for whole branches.
Step 3
Embed in JSX
Wrap the JavaScript expression in curly braces inside your JSX return.
Step 4
Guard falsy values
Convert counts to booleans (count > 0 &&) so a 0 does not render on screen.
Step 5
Render nothing when needed
Return null from a branch when the component should output no markup.
What Interviewer Expects
- Knows ternary, &&, if, and early return patterns
- Understands JSX embeds JavaScript expressions
- Can render nothing by returning null
- Aware of the && with 0 rendering pitfall
- Can handle loading, empty, and error states
Common Mistakes
- Using && with a number so a 0 leaks into the UI
- Putting if statements directly inside JSX braces
- Returning undefined instead of null to render nothing
- Deeply nesting ternaries until unreadable
- Forgetting keys when conditionally rendering lists
Best Answer (HR Friendly)
“Conditional rendering is how React decides what to put on the screen based on the current situation, like showing a loading message while data arrives and the real content once it is ready. It uses normal JavaScript logic to make that choice.”
Code Example
function Notifications({ status, count }) {
if (status === 'loading') {
return <p>Loading...</p>
}
return (
<div>
{count > 0 ? (
<span>You have {count} messages</span>
) : (
<span>No new messages</span>
)}
{count > 5 && <p>Your inbox is getting full.</p>}
</div>
)
}
function Banner({ show }) {
if (!show) return null
return <div className="banner">Welcome back!</div>
}Follow-up Questions
- Why can the && operator accidentally render a 0?
- How do you render nothing from a component?
- When is an early return cleaner than a ternary?
- How would you handle loading, error, and empty states together?
- Can you use a switch statement for conditional rendering?
MCQ Practice
1. Which operator renders an element only when a condition is true?
The logical && renders the right-hand element only when the left-hand condition is truthy.
2. How do you make a component render nothing?
Returning null tells React to render nothing for that component.
3. Why guard with count > 0 && instead of count &&?
With count of 0, count && element evaluates to 0, and React renders the number 0; a boolean guard prevents that.
Flash Cards
Which patterns enable conditional rendering? — Ternary, logical &&, if statements, early returns, and returning null.
How do you render nothing? — Return null from the component or branch.
What is the && with 0 pitfall? — count && element renders 0 when count is 0; use count > 0 && instead.
Does React have template directives? — No, you use plain JavaScript expressions inside JSX.