Conditional Rendering: Show UI Based on State
React uses plain JavaScript to decide what UI to show, which is essential for displaying loading states, errors, or user-specific content. The footgun: count && <Component /> will render a "0" if count is 0, not nothing.
Why it exists
Modern UIs are not static; they must react to data fetching, user input, and application state. Conditional rendering is the fundamental mechanism in React for translating this dynamic state into a responsive user interface, showing or hiding elements as needed without a complex template language.
The mental model
Don't think of it as a special React feature. It's just JavaScript. A React component is a function that returns some UI (JSX). You can use any JavaScript logic—if/else, switch, or ternary operators—inside that function to decide what JSX to return. If a user is logged in, return the profile page JSX. If not, return the login form JSX.
How it works
React leverages standard JavaScript for control flow. Three patterns are common. First, full if/else blocks can return entirely different JSX trees, which is useful for major UI changes. Second, the ternary operator (condition ? <ShowThis /> : <ShowThat />) is perfect for concise, inline choices between two options. Third, the logical AND operator (condition && <ShowThis />) is a shortcut to render an element only if a condition is true; if false, it renders nothing.
When to use it
Use it constantly. It's essential for showing loading states (isLoading ? <Spinner /> : <Data />), handling optional content (user.isAdmin && <AdminPanel />), displaying error messages (error && <ErrorMessage />), or toggling UI elements like a modal or a dropdown menu.
When not to use it
Avoid overly complex, nested ternary operators as they quickly become unreadable; use if/else or extract the logic to a variable instead. Also, be careful when a component returns null to hide itself. It's often clearer for the parent component to control whether the child is rendered at all, preventing unexpected behavior.
One canonical example
A component needs to show an item from a packing list. If the item is packed, it should show a checkmark. This can be done with an if statement:
function Item({ name, isPacked }) {
if (isPacked) {return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;
}
Alternatively, a ternary operator can handle this inline for more concise code:
return <li className="item">{name} {isPacked ? '✅' : ''}</li>;
Interview question
When using the logical AND operator (condition && <Component />) for conditional rendering in React, what is a crucial behavior to be aware of?
- a.It can cause the component to re-render unnecessarily even when the condition is false.
- b.It prevents the component from receiving props dynamically based on the condition.
- c.It only works correctly if 'condition' is a boolean value.
- d.If 'condition' evaluates to 0, the number 0 might be displayed in the UI.Correct
Why? this is the answer
The card explicitly mentions this as a 'footgun': if 'condition' is the number 0, the expression '0 && <Component />' evaluates to 0, which React will render. Option C is incorrect because JavaScript's logical AND operator works with any truthy or falsy value, not just strict booleans.
Just read this? Test yourself on what you have been reading.
Read the original → react.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles