HOW RE-RENDERING WORKS?

import { useState } from "react";

export default function Counter() {

  let [count, setCount] = useState(0);

  console.log("component is rendered!");

  console.log(`count=${count}`);

  let incCount = () => {

    setCount(count + 1);

    console.log(`inside incCount, count=${count}`);

  };

  return (

    <>

      <h3>Count={count}</h3>

      <button onClick={incCount}>increase count</button>

    </>

  );

}

 

HERE, WE CAN SPOT A DIFFERENCE THAT COUNT ON CONSOLE DIFFERS FROM COUNT ON SCREEN

THE COUNT ON CONSOLE IS LESS BY 1.(AS WE INCREASE THE COUNT BY 1 AFTER EACH CLICK).

IF IT'S BY 2 THEN THE DIFFERENCE WOULD BE 2.

IT HAPPENS BECAUSE THE COUNT VARIABLE IS UPDATED AFTER RE-RENDERING.

FOR EVERY CLICK THE PAGE IS RE-RENDERED AND THE COUNT VARIABLE IS UPDATED AFTER RE-RENDERING.

HENCE, THERE IS A DIFFERENCE.

THE COUNT VARIABLE IS UPDATED AFTER RE-RENDERING. THE UPDATED VARIABLE CAN ONLY BE ACCESSED AFTER RE-RENDERING.