useEffect与useLayoutEffect无法正常工作

Question

据我从各种来源了解到，useEffect是在将更改提交到dom之后触发的，而useLayoutEffect是在将更改刷新到DOM之前触发的。但是，确实如此。我期望的是debugger2应该阻止DOM更改，但是根本不会发生，有人可以解释吗？

import React, { useState, useLayoutEffect,useEffect } from "react";
import ReactDOM from "react-dom";

const BlinkyRender = () => {
    const [value, setValue] = useState(0);

    useEffect(() => {
        if (value === 0) {
            debugger1
            setValue(10 + Math.random() * 200);
        }
    }, [value]);

    useLayoutEffect(() => {
        if (value === 0) {
            debugger2
            setValue(10 + Math.random() * 200);
        }
    }, [value]);


    return (
        <div style={{border:'solid',display:'inline'}} onClick={() => setValue(0)}>value: {value}</div>
    );
};

ReactDOM.render(
    <BlinkyRender />,
    document.querySelector("#root")
);