Реактивен ли React?

🎯 Зачем спрашивают

Проверить, понимает ли кандидат разницу между декларативностью и реактивностью

📝 Ответ

Коротко: React не является "реактивным" в классическом смысле, как это понимается в реактивном программировании, потому что обновляет UI по явным сигналам (useState, setState, useReducer). Подробнее:

Реактивность — подход в программировании (абстракция), согласно которому часть системы может среагировать на изменения в другой части системы. Иначе: если меняется источник, то автоматически пересчитываются все значения, которые от него зависят.

Рассмотрим пример:


// Что произойдет при клике по кнопке?
export default function Counter() {
  let count = 0;
 
  const changeCount = () => {
    count += 1;
  }
 
  return (
    <div>
      <h1>Counter</h1>
      <div>{count}</div>
      <button onClick={ changeCount }>Change count</button>
    </div>
  );
}

При клике на кнопку переменная count изменит свое значение, но в UI изменений не будет. Потому что у react есть конкретный API для триггера перерендера UI — state.

❗

React — декларативный, а не реактивный, так как работает через явные сигналы (setState, useState, useReducer), а не через автоматическое трекинг зависимостей.

Если бы react был бы реактивен в классическом понимании этого слова, то приведенного кода выше было бы достаточно, чтобы увидеть изменения в UI.

И тот же самый код на Vue:


<script setup>
import { ref } from "vue";

const count = ref(0);

function changeCount() {
  count.value += 1;
}
</script>

<template>
  <div>
    <h1>Counter</h1>
    <div>{{ count }}</div>
    <button @click="changeCount">Change count</button>
  </div>
</template>

⚖️ Компромиссы

✅ Плюсы	❌ Минусы
React проще в отладке и предсказуем → нет скрытых магических подписок	Нужно явно дергать `setState`
Код чище: все обновления идут через единый механизм.	Нет автоматического отслеживания зависимостей → приходится оптимизировать (memo, useMemo, useCallback)

🔎 Встречные вопросы

Чем React отличается от MobX/Vue по модели обновления?

Почему в React нужны memo и useMemo, а во Vue — нет?

Что происходит после вызова setState? (реконсиляция, батчинг).

🚩 Красные флаги

React полностью реактивный, как RxJS/Vue

React сам обновляет переменные

🛠 Практика

Задача Counter

StackBlitzCounter - StackBlitz

Counter - StackBlitz

Next generation frontend tooling. It's fast!


// Что произойдет при клике по кнопке?
export default function Counter() {
  let count = 0;
 
  const changeCount = () => {
    count += 1;
  }
 
  return (
    <div>
      <h1>Counter</h1>
      <div>{count}</div>
      <button onClick={ changeCount }>Change count</button>
    </div>
  );
}

📚 Источники / ссылки