Почему изменение обычной переменной не вызывает повторный рендер в React?

React рендерит компоненты на основе state и props, а не любых переменных.

1) Как React понимает, что нужно обновиться

React реагирует на:

1. Изменение state.

2. Изменение props.

3. Иногда — изменение context.

Обычные переменные не отслеживаются.

2) Пример проблемы

let count = 0;

function App() {
  function handleClick() {
    count++;
    console.log(count); // меняется, но UI нет
  }

  return <button onClick={handleClick}>{count}</button>;
}

Причина:

1. React не знает, что переменная изменилась.

2. Ререндер не запускается.

3) Правильный подход

Использование state:

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
}

4) Почему React устроен именно так

1. Управляемые обновления.

2. Предсказуемость.

3. Оптимизация производительности.

Если бы React отслеживал любые переменные:

1. Это было бы очень дорого.

2. Поведение стало бы нестабильным.

Вывод: React запускает ререндер только при изменении state или props, поэтому обычные переменные не подходят для хранения данных интерфейса