export default function App() {

  // as the useState runs before useEffect, 
  // it means count is avaliable to use in the useEffect 
  // but why it is not running?
  useEffect(() => {
    console.log("I only run on first render.", count);
  },[count]);

  useEffect(() => {
    console.log("I runs on every render/re-render", count);
  });

  // if i use const in place of var, it throws error of lexical scope
  // but as useState run before the effect the count is already in scope, right?
  var [count, setCount] = useState(0);

  useEffect(() => {
    console.log("run on first render and whenever the count changes", count);
  }, [count]);


  return (
    <div className="App">
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>count +</button>
    </div>
  );
}

I think this is the order of execution for first render:

run lazy intializers (or we can say run useState) -> redner -> dom update -> broser paint -> run effect

And for re-render: all the things except lazy intializers and effect cleanup before running new effects.