Conditional randering in React is the process of displaying specific UI elements based on certain criteria, such as application state, user permissions, or data availability. Unlike template-based frameworks with built-in directives, React leverages standard JavaScript logic to handle these scenarios.

1. Traditional If-Else Blocks

The most basic approach involves using if and else statements outside of the return block to determine which component tree to mount.

import { useState } from 'react';

function AuthPortal() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  if (isAuthenticated) {
    return <button onClick={() => setIsAuthenticated(false)}>Sign Out</button>;
  }

  return <button onClick={() => setIsAuthenticated(true)}>Sign In</button>;
}

Best for: Complex logic that requires significant processing before returning the view.

2. Ternary Expressions

The ternary operator (condition ? true : false) is the preferred method for inline conditions within JSX, especially for simple binary choices.

function InventoryStatus({ stockCount }) {
  return (
    <div className="status-container">
      <h3>Inventory Level</h3>
      {stockCount > 0 ? (
        <span className="in-stock">Available: {stockCount}</span>
      ) : (
        <span className="out-of-stock">Currently Unavailable</span>
      )}
    </div>
  );
}

Best for: Quick toggles or simple A/B layouts within the component markup.

3. Short-Circuit Evaluasion (&&)

When you only want to render a componant if a condition is true (and render nothing if false), the logical && operator is highly efficient.

function ShoppingCart({ items }) {
  const hasItems = items.length > 0;

  return (
    <header>
      <i className="icon-cart" />
      {hasItems && <div className="badge-count">{items.length}</div>}
    </header>
  );
}

Note: Be cautious with numeric values. Using 0 && <Component /> will render the number 0 in the UI. Always convert to a boolean: items.length > 0 && ....

4. Element Variable Assignment

You can store JSX in variables and reference them later. This keeps the return statement clean even when dealing with multiple conditions.

function DashboardHeader({ userRole }) {
  let menuContent;

  if (userRole === 'admin') {
    menuContent = <AdminTools />;
  } else if (userRole === 'editor') {
    menuContent = <EditorTools />;
  } else {
    menuContent = <ViewerTools />;
  }

  return (
    <nav className="navbar">
      <h1>Dashboard</h1>
      {menuContent}
    </nav>
  );
}

Best for: Improving readability when multiple conditional segments are used in a single component.

5. Switch-Case Logic

For components with many distinct states, such as a request lifecycle, a switch statement often provides better structure than nested if blocks.

function DataDisplay({ fetchState }) {
  const renderContent = () => {
    switch (fetchState) {
      case 'loading':
        return <p>Syncing data...</p>;
      case 'success':
        return <p>Data loaded successfully.</p>;
      case 'error':
        return <p>Unexpected error occurred.</p>;
      default:
        return <p>Idle</p>;
    }
  };

  return <section className="content-wrapper">{renderContent()}</section>;
}

Best for: State machines or handling numerous discrete categories.

6. Abstraction via Guard Components

Encapsulating conditional logic into reusable components improves maintainability across large projects, especially for repetitive tasks like permission checks.

const PermissionGate = ({ requiredRole, currentUserRole, children, fallback = null }) => {
  if (currentUserRole !== requiredRole) {
    return fallback;
  }
  return <>{children}</>;
};

// Usage
function SettingsPage({ userRole }) {
  return (
    <PermissionGate 
      requiredRole="admin" 
      fallback={<p>Access Denied: Admins Only</p>}
    >
      <button>Delete Database</button>
    </PermissionGate>
  );
}

Best for: Shared logic like authentication, authorization, or feature flagging.

7. Code Splitting with Suspense

For performance optimization, you can conditionally render components and only download their code when the condition is met using React.lazy and Suspense.

import React, { Suspense, lazy } from 'react';

const HeavyAnalytics = lazy(() => import('./HeavyAnalytics'));

function AnalyticsDashboard({ showDetailed }) {
  return (
    <div>
      <h2>Summary View</h2>
      {showDetailed && (
        <Suspense fallback={<div>Loading Analytics Engine...</div>}>
          <HeavyAnalytics />
        </Suspense>
      )}
    </div>
  );
}

Best for: Reducing initial bundle size by lazy-loading heavy UI segments.

Comparison Table

Pattern	Use Case	Benefit	Limitation
If-Else	Complex logic	High clarity for devs	Blocky, outside JSX
Ternary	Two-way choice	Concise, inline	Poor readability when nested
Logical &&	Conditional presence	Minimalist	Issues with falsy numbers
Variable	Multi-step logic	Readable return block	Extra declaration needed
Switch	Multiple states	Structured, predictable	Verbose syntax
Guard Comp	Reusable logic	Encapsulation	Initial setup time
Suspense	Performance	Lazy loading	React 16.6+ requirement