render cycle

App.jsx

import { useState } from "react";

export default function Counter() {
  const [number, setNumber] = useState(0);
  let local_variable = 0;
  let currentdate = new Date();
  var datetime =
    "Last Sync: " +
    currentdate.getDay() +
    "/" +
    currentdate.getMonth() +
    "/" +
    currentdate.getFullYear() +
    " @ " +
    currentdate.getHours() +
    ":" +
    currentdate.getMinutes() +
    ":" +
    currentdate.getSeconds();
  console.log("local variable", local_variable);
  console.log(datetime);
  local_variable++;
  console.log("local variable", local_variable);
  console.log("------------------------------------");

  return (
    <>
      <h1>{number}</h1>
      <button
        onClick={() => {
          setNumber(number + 1);
          setTimeout(() => {
            console.log("number render#1", number);
          }, 5000);
          setNumber(number + 1);
          setNumber(number + 1);
          setTimeout(() => {
            console.log("number render#2", number);
          }, 8000);
        }}
      >
        +3
      </button>
    </>
  );
}