Inside the app component, I am having a button, which is updating the state, and inside of a cleanup function, I am incrementing another state(p), which should I think update/ trigger a rerender without registering the timer in the new render as it is not in the dependency array, after state has changed, so summarising, step will increment the p value before setstate triggers I think so. after setstate, the p value is not as expected in the console, I am consoling inside of useeffect

import logo from "./logo.svg";
import "./App.css";
import { useEffect, useState } from "react";
function App() {
  const [state, setState] = useState(0);
  const [p, setp] = useState(100);
  useEffect(() => {
    console.log("p ", p, "state", state);
    let timer = setTimeout(() => {
      setState((p) => p + 1);
    }, 5000);
    return () => {
      console.log("inside of cleanup fun");
      clearTimeout(timer);
      setp((p) => p + 1);
    };
  }, [state]);

  return (
    <div className="App">
      <button onClick={() => setState((prev) => prev + 1)}>change</button>
    </div>
  );
}

export default App;

output

p 100 state 0
p 100 state 1
inside of cleanup fun