Что такое условный рендеринг в React?

Что такое условный рендеринг

Условный рендеринг в React — это подход к отображению разных элементов интерфейса в зависимости от состояния приложения, пропсов или других условий. У React нет специальной директивы для условий (как v-if во Vue) — вместо этого используются обычные конструкции JavaScript внутри JSX, потому что JSX компилируется в вызовы функций и является обычным выражением.

Основные способы

Тернарный оператор

Удобен, когда нужно выбрать один из двух вариантов рендеринга.

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <UserPanel /> : <LoginButton />}
    </div>
  );
}

Логическое И (&&)

Применяется, когда элемент нужно показать только при истинном условии, а иначе не рендерить ничего.

function Notifications({ count }) {
  return (
    <div>
      {count > 0 && <span className="badge">{count}</span>}
    </div>
  );
}

Важный нюанс: если count равен 0, React отрендерит на экране 0, потому что 0 — валидный React-узел (falsy, но не null/undefined/false). Чтобы избежать этого, условие приводят к boolean: count > 0 && ....

if / else до return

Если логика ветвления сложная, её лучше вынести за пределы JSX — так код читается проще.

function Status({ status }) {
  if (status === 'loading') {
    return <Spinner />;
  }
  if (status === 'error') {
    return <ErrorMessage />;
  }
  return <Content />;
}

Возврат null

Компонент может не рендерить ничего, вернув null (но не undefined).

function Banner({ show }) {
  if (!show) return null;
  return <div className="banner">Акция!</div>;
}

Объект-словарь вместо цепочки условий

Для нескольких вариантов удобнее замаппить значение на компонент, чем писать длинный if/else или switch.

const STATUS_COMPONENTS = {
  loading: <Spinner />,
  error: <ErrorMessage />,
  success: <Content />,
};

function Status({ status }) {
  return STATUS_COMPONENTS[status] ?? null;
}

Вынесение условия в переменную

Часто результат ветвления сохраняют в переменную перед return, чтобы сам JSX оставался плоским и читаемым:

function App({ isLoading, error, data }) {
  let content;
  if (isLoading) {
    content = <Spinner />;
  } else if (error) {
    content = <ErrorMessage message={error} />;
  } else {
    content = <List items={data} />;
  }

  return <div className="app">{content}</div>;
}

Условный рендеринг атрибутов

Условие можно применять не только к целым элементам, но и к отдельным атрибутам, например классам:

<button className={isActive ? 'btn active' : 'btn'}>
  Нажми меня
</button>

Почему это важно

Условный рендеринг — фундаментальная часть декларативного подхода React: вместо императивного управления DOM (показать/скрыть элемент через style.display) разработчик описывает, каким должен быть UI при данном состоянии, а React сам эффективно обновляет реальный DOM.