Exhaustive Type Checking in React (TSX) with TypeScript’s never Type

neverType for Exhaustive Type Checking in TypeScript

---

Context

• When handling union types in React apps (e.g.,"loading" | "success" | "error"), developers often forget to cover every case.
• Without TypeScript, this can silently break your UI at runtime. With TypeScript’s never, you get compile-time safety that forces you to be exhaustive.

---

🚨 Without TypeScript – The Problem

// React without TypeScript
import React from "react";

function StatusMessage({ status }) {
  switch (status) {
    case "loading":
      return <p>Loading...</p>;
    case "success":
      return <p>Data loaded successfully!</p>;
    // ❌ Forgot to handle "error"
    default:
      // Will silently run for unexpected values
      return <p>Unknown state</p>;
  }
}

// At runtime, this could happen:
<StatusMessage status="error" />; 
// UI shows "Unknown state" instead of an error message

👉 Issue

You don’t get any warning if "error" is unhandled. The bug only appears when the app runs.

---

✅ With TypeScript + never – Compile-Time Safety

// React with TypeScript
import React from "react";

type Status = "loading" | "success" | "error";

function StatusMessage({ status }: { status: Status }) {
  switch (status) {
    case "loading":
      return <p>Loading...</p>;
    case "success":
      return <p>Data loaded successfully!</p>;
    case "error":
      return <p>Something went wrong.</p>;
    default: {
      // Exhaustive check using never
      const _exhaustive: never = status;
      return _exhaustive;
    }
  }
}

🔒 Why this is safe:

• If you add a new state (e.g., "idle") to Status but forget to handle it in the switch, TypeScript will throw a compile-time error at the never line.
• This guarantees you can’t accidentally miss a case.

---

🎯 Takeaway

• Without TS: Missed cases only show up at runtime → unstable apps.
• With TS + never: TypeScript enforces exhaustive handling at compile-time → safer apps and fewer bugs.