React Cheatsheet

Conditional Rendering

Use this React reference while you build software engineering projects, review code for technical interview prep, or polish examples for a software engineer resume.

if / else Statements

Use early returns or variables before the JSX.

// Early return
function Alert({ type, message }) {
  if (!message) return null; // render nothing

  if (type === 'error') {
    return <div className="alert-error">{message}</div>;
  }
  return <div className="alert-info">{message}</div>;
}

// Variable holding JSX
function Status({ status }) {
  let content;
  if (status === 'loading') content = <Spinner />;
  else if (status === 'error') content = <ErrorBanner />;
  else content = <DataView />;

  return <section>{content}</section>;
}

Ternary Operator

Inline conditional inside JSX expressions.

// Basic ternary
function Greeting({ loggedIn }) {
  return <h1>{loggedIn ? 'Welcome back!' : 'Please sign in.'}</h1>;
}

// Entire element
function Button({ isLoading }) {
  return isLoading ? <Spinner /> : <button>Submit</button>;
}

// Nested ternaries (keep shallow — 2 levels max)
function Badge({ status }) {
  return (
    <span className={
      status === 'active'  ? 'green' :
      status === 'pending' ? 'yellow' :
                             'red'
    }>
      {status}
    </span>
  );
}

Short-Circuit &&

Render the right side only if the left side is truthy.

// Show if condition is true
{isAdmin && <AdminPanel />}
{error && <p className="error">{error}</p>}
{items.length > 0 && <ul>{items.map(...)}</ul>}

// DANGER: falsy values other than false/null/undefined render as text
{count && <Badge />}      // renders "0" when count = 0 — BUG!
{count > 0 && <Badge />}  // correct
{!!count && <Badge />}    // also correct

// false, null, undefined render NOTHING
{false}     {/* nothing */}
{null}      {/* nothing */}
{undefined} {/* nothing */}
{0}         {/* renders "0" — watch out! */}
{NaN}       {/* renders "NaN" — watch out! */}

Nullish Coalescing and Optional Chaining in JSX

// Render fallback text when value is null/undefined
{user?.name ?? 'Anonymous'}

// Safe access into nullable object
{profile?.avatar
  ? <img src={profile.avatar} alt="avatar" />
  : <DefaultAvatar />
}

Returning null — Hiding a Component

Returning null renders nothing but still mounts the component (hooks run, refs attach).

function Tooltip({ visible, text }) {
  if (!visible) return null;
  return <div className="tooltip">{text}</div>;
}

// Alternatively, don't render the component at all in the parent:
{visible && <Tooltip text="Hello" />} // component is NOT mounted when false

switch Statements

Useful for many mutually exclusive states.

function Page({ route }) {
  switch (route) {
    case '/':        return <Home />;
    case '/about':   return <About />;
    case '/contact': return <Contact />;
    default:         return <NotFound />;
  }
}

// Object map (cleaner for many cases)
const VIEWS = {
  home:    <Home />,
  about:   <About />,
  contact: <Contact />,
};

function Router({ view }) {
  return VIEWS[view] ?? <NotFound />;
}

Conditional className

// Ternary
<div className={isActive ? 'active' : 'inactive'}>...</div>

// Template literal with optional class
<div className={`card ${isSelected ? 'selected' : ''}`}>...</div>

// Filter falsy values (manual clsx)
<div className={['btn', isLarge && 'btn-lg', isDisabled && 'btn-disabled']
  .filter(Boolean).join(' ')}>
</div>

// clsx / classnames library (recommended)
import clsx from 'clsx';
<div className={clsx('btn', { 'btn-lg': isLarge, 'btn-disabled': isDisabled })}>
</div>

Conditional Styles

// Inline style with ternary
<div style={{ display: visible ? 'block' : 'none' }} />

// Visibility (keeps in DOM, unlike display:none with unmount)
<div style={{ visibility: visible ? 'visible' : 'hidden' }} />

// Opacity
<div style={{ opacity: isLoading ? 0.5 : 1 }} />

Pattern: Loading / Error / Empty / Data

The most common multi-state pattern:

function UserList() {
  const { data, isLoading, error } = useUsers();

  if (isLoading) return <Spinner />;
  if (error)     return <ErrorMessage message={error.message} />;
  if (!data?.length) return <p className="muted">No users yet.</p>;

  return (
    <ul>
      {data.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

Conditional Rendering with Suspense

import { Suspense, lazy } from 'react';

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

function App({ showMap }) {
  return (
    <div>
      {showMap && (
        <Suspense fallback={<p>Loading map…</p>}>
          <HeavyMap />
        </Suspense>
      )}
    </div>
  );
}

Gotchas

// 0 renders as "0" — use boolean conversion
{items.length && <List />}    // BUG if items is empty: renders "0"
{items.length > 0 && <List />} // correct
{!!items.length && <List />}   // correct

// NaN renders as "NaN"
{NaN && <Foo />}   // renders "NaN"
{!!NaN && <Foo />} // renders nothing

// Don't use && when you need else — use ternary
{condition && <A />}  // no-op if false
{condition ? <A /> : <B />} // renders B if false

// null vs undefined vs false vs 0
// null → nothing   undefined → nothing   false → nothing   0 → "0"   '' → nothing