I understand that useEffectLayout runs before screen re-rendering and the purpose of useEffectLayout is for avoiding flicker.

So, I expect after the state update in useEffectLayout , it wont re-render the screen immediately but update the value in state first. However, I saw that the useEffect is executed after useEffectLayout.

That means screen was re-rendered after useEffectLayout with the old state value.

So I dont understand why useEffectLayout can avoid flicker.

import { useEffect, useState, useLayoutEffect } from "react";
export default function App() {
  const [count, setCount] = useState(0);

  console.log("count in code: ", count);

  useEffect(() => {
    console.log("count in useeffect: ", count);
  }, [count]);

  useLayoutEffect(() => {
    console.log("count in uselayout: ", count);
    setCount(1);
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}