🚦

Conditional Rendering

RenderingChoosing different UI branches based on current values

Conditional rendering is the React pattern for showing different UI depending on current conditions. Rather than introducing a separate template language, React uses normal JavaScript branching to choose which UI branch remains in the result.

▶Architecture Diagram

🔄 Process

🧠Current State

🔎Condition Check

📄UI Branch A

✅UI Branch B

🖥️Rendered Result

Dashed line animations indicate the flow direction of data or requests

Why do you need it?

Real interfaces do not stay in one static shape. Loading states, permissions, and empty results all change what should appear. Without a clean way to branch UI, the code quickly fills with scattered show-hide rules that are hard to read.

Why did this approach emerge?

As frontend apps became more stateful, screens started behaving more like state machines than static pages. React embraced that shift by treating UI as a function of current values, and conditional rendering became one of the most direct expressions of that model.

How does it work inside?

During render, the component reads current props and state, then uses conditions to choose one JSX branch over another. It may return one branch, another branch, or even nothing at all. React only keeps the chosen result in the render tree.

In Code

Choosing completely different UI branches from state

type ResultsPanelProps = {
  isLoading: boolean;
  error: string | null;
  items: string[];
};

function ResultsPanel({
  isLoading,
  error,
  items,
}: ResultsPanelProps) {
  if (isLoading) {
    return <Spinner />;
  }

  if (error) {
    return <ErrorState message={error} />;
  }

  return <ResultList items={items} />;
}

Conditional rendering is not about adding hide/show styles after the fact. It is about choosing which JSX branch exists at all for the current state.

A false condition can remove a branch entirely

function AdminActions({ canDelete }: { canDelete: boolean }) {
  return (
    <footer>
      <button>Close</button>
      {canDelete && <button>Delete</button>}
    </footer>
  );
}

The `&&` pattern makes the idea explicit: when the condition is false, React renders no branch at that position.

What is it often confused with?

Conditional rendering and list rendering both make UI dynamic, but they answer different questions. Conditional rendering decides which branch to show. List rendering decides how many similar branches to repeat.

Commonly Compared Concepts

📚

List & Key

Rendering arrays as repeated UI items and identifying them with keys

Conditional rendering chooses among branches, while list rendering repeats similar structure many times. Selection and repetition are different problems.

When should you use it?

In practice, conditional rendering is central for loading, empty, error, and success states. But once nested ternaries start stacking up, it is usually time to extract smaller components so the branching meaning stays readable.

Showing different actions based on login statusSwitching between loading, error, and success screensHiding admin features for unauthorized usersRendering empty-state messages when data is missing