Conditional Rendering
📚 What is Conditional Rendering? Conditional rendering shows different UI based on a condition - the component decides what to render at runtime. You use familiar JavaScript: if/else, ternary (? :), or logical AND (&&). This is how React makes interfaces respond to state and props.
Appy Says…
Show a loading spinner while data is fetching. Show an error message if something failed. Show the content when it's ready. Conditional rendering is how you build UIs that respond intelligently to state.
What is Conditional Rendering?
Conditional rendering means showing different JSX based on state or props. React uses JavaScript's own conditional syntax inside JSX.
- •&&:
{isLoading && <Spinner />} - •Ternary:
{isError ? <Error /> : <Content />} - •if/else before return: full if statement outside JSX
- •Early return:
if (isLoading) return <Spinner />; - •Nullish:
{user ?? <LoginPrompt />} - •Rendering nothing: return
nullfrom a component
Think of it like a Minecraft scoreboard condition
In Minecraft command blocks, you can set commands to run only when a score equals X. React conditional rendering works the same — show this UI component only when a condition is true.
How It Works
- •1.
{condition && <Component />}— renders Component only if condition is truthy - •2. Gotcha:
{0 && <X />}renders the number 0! Use{Boolean(count) && ...}or{count > 0 && ...} - •3. Ternary:
{a ? <A /> : <B />}— always renders one or the other - •4. Early return: cleanest for complex conditions — return early before the main JSX
- •5.
return nullrenders nothing but still mounts/unmounts the component
Real-World Examples
- •Loading state:
{isLoading ? <Skeleton /> : <Content data={data} />} - •Auth gate:
{user ? <Dashboard /> : <LoginPage />} - •Error banner:
{error && <ErrorBanner message={error} />} - •Admin-only:
{user.role === 'admin' && <AdminPanel />}
Key Facts
- •Returning
nullfrom a component renders nothing but still triggers lifecycle/effects - •Short-circuit
&&is a JS feature — React doesn't add any magic;falseandnullare valid children that render nothing - •Prefer ternary for binary cases (show A or B); use
&&for optional additions - •Complex conditionals are cleaner as separate variables or early returns than nested ternaries
Watch Out!
{count && <Badge />} renders 0 on screen when count is 0 because 0 is falsy in JS but React renders it as text. Fix: {count > 0 && <Badge />} or {!!count && <Badge />}.
Remember
&& for optional show/hide. Ternary for A or B. Early return for complex conditions. Always check for 0 gotcha with &&.
What You Learned
- •Conditional rendering uses &&, ternary, or early return to show/hide JSX
- •Beware &&with numbers — 0 renders; use > 0 check
- •Unlocks: loading states, error messages, auth gates, feature flags
Key Facts
- →Returning
nullfrom a component renders nothing but still triggers lifecycle/effects - →Short-circuit
&&is a JS feature — React doesn't add any magic;falseandnullare valid children that render nothing - →Prefer ternary for binary cases (show A or B); use
&&for optional additions - →Complex conditionals are cleaner as separate variables or early returns than nested ternaries
Real-World Examples
Remember
&& for optional show/hide. Ternary for A or B. Early return for complex conditions. Always check for 0 gotcha with &&.
Quick Quiz
Conditional rendering shows?