Coba buka GoFood. Belum login — tampil tombol "Masuk". Udah login — tampil profil + saldo + alamat. Restoran tutup — tampil status "Closed" abu-abu, tombol pesan disabled. Buka — tampil rating + estimasi pengiriman, tombol pesan biru terang. Komponen yang sama ngrender beda berdasar kondisi. Itulah conditional rendering di React: tampilin UI berbeda tergantung state/props/data. Gak ada syntax khusus — pake JavaScript biasa: ternary, &&, atau early return.

💡 Tiga pattern utama. Pilih yang paling pas: ternary (a vs b), && (a atau gak ada), early return (multiple early exits). Tiap punya use case ideal — pemula sering pake && di mana-mana, tapi sering lebih tepat ternary.

1. Ternary — Dua Cabang

function App() {
  const isLoggedIn = true
  return <p>{isLoggedIn ? "Selamat datang!" : "Silakan login."}</p>
}

// Bisa render JSX kompleks
return (
  <div>
    {user
      ? <Profile user={user} />
      : <LoginForm />
    }
  </div>
)

2. Logical AND && — Render atau Skip

function App() {
  const items = ["A", "B"]
  return (
    <div>
      {items.length > 0 && <p>Ada {items.length} item</p>}
      {error && <ErrorMessage>{error}</ErrorMessage>}
    </div>
  )
}

3. Early Return — Banyak Exit Point

function UserProfile({ user, loading, error }) {
  if (loading) return <Spinner />
  if (error) return <ErrorPage>{error.message}</ErrorPage>
  if (!user) return <NotFound />
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
    </div>
  )
}

4. Object Lookup — Banyak Cabang

const statusUI = {
  loading: <Spinner />,
  error: <ErrorPage />,
  empty: <EmptyState />,
  ready: <ResultList />,
}

return <div>{statusUI[status]}</div>

🎭 Analogi sehari-hari

Conditional rendering itu kayak palang pintu di tol. Mobil dengan e-toll cukup → palang naik, lewat (isLoggedIn ? <Profile />). Mobil tanpa e-toll → tampilan beda, suruh bayar tunai (<LoginForm />). Mobil rusak — gak boleh masuk, tutup total (if (broken) return <Closed />). Sistem yang sama, beda kondisi, beda output. React tinggal cek kondisi tiap render, putuskan apa yang ditampilkan. Pintu tol gak tutup buka manual — automated berdasar data sensor. UI React juga reaktif — state berubah → conditional re-evaluate → UI update.

⚠️ Jebakan yang sering ditemui

• && dengan number 0 — {items.length && <p>...</p>} render literal "0" pas length=0! 0 falsy tapi React render number sebagai text. Fix: pakai items.length > 0 && ... atau ternary items.length > 0 ? ... : null.
• && dengan empty string — {name && <p>{name}</p>} render "" pas name kosong (kelihatan kosong, tapi browser parse). Sama, pakai eksplisit boolean.
• Nested ternary kompleks — a ? b : c ? d : e ? f : g = unreadable. Pecah jadi early return atau object lookup.
• Lupa null di ternary — {cond ? <X /> : ""} (string kosong masih node) — pakai null lebih clean: cond ? <X /> : null.
• Conditional di dalam komponen yang heavy — {showExpensive && <ExpensiveComponent />} re-mount tiap toggle (state hilang). Kalau perlu pertahanin state, render selalu + hide via CSS atau pakai key stabil.
• if/else di tengah JSX — <div>if (x) ... else ...</div> invalid. JSX cuma terima EKSPRESI di {}, bukan statement.

🎯 Pilih pattern conditional — pakai mana?

• Dua opsi (a atau b, tanpa exception) → ternary cond ? a : b
• Render atau skip total → && (awas dengan 0/""!)
• 2-3 exit point berurutan (loading → error → ready) → early return — paling readable
• Banyak cabang exact match (status string) → object lookup { loading: ..., error: ... }[status]
• Bagian kecil dari JSX besar → ternary inline atau extract ke variable

Aturan: kalau ternary mulai nested 3 level → udah saatnya extract ke fungsi helper atau pecah ke komponen.

TL;DR: Conditional rendering = pakai JavaScript biasa di JSX. Pattern: ternary a ? b : c (2 cabang), && (render atau skip), early return (multiple exits — paling clean buat loading/error/ready), object lookup (banyak cabang exact match). HATI-HATI && dengan number/string — 0 & "" falsy tapi tetep di-render. Nested ternary > 2 level = pecah jadi function atau object lookup.