Имеется такой компонент:
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."
Почему так?
