When building React components with TypeScript, you often need to write conditional rendering logic in your JSX. This is where type narrowing and type guards become essential tools. Type narrowing is the process TypeScript uses to figure out the most specific type of a variable within a certain block of code, often after you check its type or value. Type guards are expressions that let TypeScript know more about a variable's type, such as using typeof, instanceof, or checking for the presence of a property.

In React, conditional UI is everywhere—whether you are checking if data exists before rendering, or displaying different elements based on a prop's value. Without type narrowing, you could easily run into runtime errors by trying to access properties or methods that don't exist on a certain type. TypeScript helps you avoid these mistakes by making sure your code only accesses properties that are safe for the current type.

Consider a prop that can be either a string or null. If you try to render its .length without checking its type, TypeScript will warn you. Using a type guard, you can safely access .length only when the value is actually a string, making your UI code more robust.

Suppose you have a component that receives a prop called message, which can be either a string or null. If you want to display the length of the message only when it exists, you can write:

type Props = {
  message: string | null;
};

function MessageLength({ message }: Props) {
  if (typeof message === "string") {
    return <div>Message length: {message.length}</div>;
  }
  return <div>No message provided.</div>;
}

Here, the typeof message === "string" check acts as a type guard. Inside that block, TypeScript knows message is a string, so accessing .length is safe. Outside the block, you handle the null case separately. This pattern ensures you never try to access .length on null, which would cause a runtime error.

Another example is when rendering different UI for different types in a union. If you have a prop that could be a User or an Admin, you might check for a property unique to one of them:

type User = { name: string; };
type Admin = { name: string; adminLevel: number; };
type Props = { person: User | Admin; };

function PersonBadge({ person }: Props) {
  if ("adminLevel" in person) {
    return <div>Admin: {person.name} (Level {person.adminLevel})</div>;
  }
  return <div>User: {person.name}</div>;
}

By checking if "adminLevel" in person, you narrow the type to Admin within that block. This lets you safely access adminLevel without risking a crash if person is a regular user. Type narrowing like this is a core part of writing safe, predictable conditional UI in React with TypeScript.