React 18 Automatic Batching

gistfile1.txt

import logo from "./logo.svg";
import "./App.css";
import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount((c) => c + 1);

    setFlag((f) => !f);
  }

  useEffect(() => {
    console.log(`Render count : ${count} Flag :${flag}`);
  });

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer">
          Learn React
        </a>

        <button className="button" onClick={handleClick}>
          Handle click
        </button>
      </header>
    </div>
  );
}

export default App;