Почему бесконечный цикл внутри коллбека из useEffect блокирует обновление DOM, хотя он выполняется после обновления DOM?

Question

[krakaka]

Имеется такой компонент:

import { useEffect, useState } from 'react';

const App = () => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    if (counter === 2) {
      while (true) {
        console.log('loop operation');
      }
    }
  });

  const onClick = () => {
    setCounter((previousCounter) => {
      return previousCounter + 1;
    });
  }

  console.log('re-rendered', counter);

  return (
    <div>
      <button onClick={onClick}>increment</button>

      <div>
        {counter}
      </div>
    </div>
  );
};

export default App;

То есть рендерится кнопка и под ней блок, в котором рендерится значение counter. Если будем нажимать кнопку, counter будет увеличиватьс в стейте и на экране, но когда counter будет равен по факту 2, значение на экране останется как 1, и в консоли мы увидим следующее:

re-rendered 0
re-rendered 1
re-rendered 2
loop operation
loop operation
loop operation
...

Рендер виртуального дома случился, раз "re-rendered 2" вывелось, но коммит в реальное DOM дерево получается что не произошел. Хотя в документации про useEffect сказано, что: "React guarantees the DOM has been updated by the time it runs the effects."

Почему так?

Answer 1

[Александр]

Потому что у Вас бесконечный цикл.

Comments

[krakaka]

Это да, но он ведь происходит после того, как DOM дерево обновилось, то есть сначала на экране должно было отрисоваться "2", а потом все зависнуть?