block12.jsx

const RenderCycle = () => {
    const log = useLog("RenderCycle");
    const [, setState] = useState({});
    const forceRender = () => setState({});
    const renderCalls = useRef(0);

    const HandleClick = () => {
        renderCalls.current = 0;
        forceRender();
    };

    useEffect(() => {
        renderCalls.current += 1;
        if (renderCalls.current < 5) forceRender();
        log("render");
    });
    log("update");

    return (
        <div style={boxStyle} onClick={HandleClick}>
            click
        </div>
    );
    /**
     * update {call:1,render:0}(RenderCycle) 0.365ms
     * render {call:1,render:1}(RenderCycle) 0.33ms
     * update {call:2,render:1}(RenderCycle) 0.26ms
     * render {call:2,render:2}(RenderCycle) 0.315ms
     * update {call:3,render:2}(RenderCycle) 0.12ms
     * render {call:3,render:3}(RenderCycle) 0.25ms
     * update {call:4,render:3}(RenderCycle) 0.07ms
     * render {call:4,render:4}(RenderCycle) 0.495ms
     * update {call:5,render:4}(RenderCycle) 0.055ms
     * render {call:5,render:5}(RenderCycle) 0.135ms
     */
};