Teaching useEffect

App.tsx

import { useEffect, useRef, useState } from "react";

function App() {
  const [counter, setCounter] = useState(3);

  console.log("App render", counter);
  useEffect(() => {
    console.log("App Effect");
    // console.log("App Effect", counter);

    return () => {
      // the state is still from the previous render
      console.log("App Effect Cleanup");
      // console.log("App Effect Cleanup", counter);
    };
  });

  // Quiz: When does the cleanup function run?
  //
  // App render (initial render)
  // App Effect (initial render Effect)
  // -> click and update state
  //
  // A:
  // App Render
  // App Effect
  //
  // B:
  // App Effect Cleanup
  // App Render
  // App Effect
  //
  // C:
  // App Render
  // App Effect Cleanup
  // App Effect

  return (
    <div>
      <h1>Hello World</h1>
      {counter}
      <button
        onClick={() => {
          setCounter((prevCounter) => prevCounter + 1);
        }}
      >
        +1
      </button>
    </div>
  );
}

export default App;