Что происходит в DOM-дереve в момент клика по кнопке, если обработчик клика меняет state компонента?

Как React обрабатывает клик и изменение state

Когда пользователь кликает по кнопке, браузер генерирует событие, которое попадает в обработчик, назначенный через React. Внутри обработчика вы вызываете функцию обновления state (например, setState или useState). React не обновляет DOM мгновенно — он помечает компонент как «грязный» и ставит задачу на ререндер в очередь.

После завершения текущего обработчика событий React запускает процесс ререндера. Он создаёт новый виртуальный DOM, представляющий желаемое состояние интерфейса. Затем React сравнивает новый виртуальный DOM с предыдущим (это называется диффинг) и вычисляет минимальный набор изменений, которые нужно внести в реальный DOM. Только эти изменения применяются к браузерному DOM, что делает обновление эффективным.

Пример кода

function Counter() {
  const [count, setCount] = React.useState(0);

  function handleClick() {
    setCount(count + 1); // обновление state
    console.log('count в обработчике:', count); // всё ещё 0
  }

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

В этом примере после клика count внутри обработчика остаётся старым значением, потому что обновление state асинхронное. React сначала завершит выполнение функции, затем перерендерит компонент с новым значением count и обновит текст кнопки в DOM.

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

Такой подход позволяет React группировать несколько обновлений state в один ререндер, избегая лишних операций с DOM. Это особенно полезно в больших приложениях, где часто меняется состояние. Понимание этого механизма помогает избежать ошибок, связанных с чтением state сразу после вызова сеттера, и правильно использовать функциональные обновления.

Итог: При клике React откладывает обновление DOM до завершения обработчика, затем выполняет виртуальный диффинг и применяет только необходимые изменения. Это делает интерфейс отзывчивым и производительным, поэтому важно помнить об асинхронности state при написании обработчиков.