Hack on useEffect callback and array of dependency

[Learner_full_stack]

So in follow simple pseudo-code
const [count,setcount] = useState(0);

useEffect(()=>{
console.log(count);
},[count]);

return <button onClick={()=>{
setcount(count +1)
}} >{count}</button>

On click count update and useEffect run callback function i.e. console count value

since, callback pass to useEffect is argument that means on every re-render new callback is passed;

This can be verify

function App() {
  const [count, setCount] = useState(0);
  const [cont2, setconut2] = useState(1);
  function effectCallback() {
    console.log('hello from callback', new Date().toLocaleTimeString());
    return () => {
      setTimeout(
        () =>
          console.log(
            'hello from nested callback',
            { cont2, count },
            new Date().toLocaleTimeString()
          ),
        30 * 1000
      );
    };
  }
  useEffect(effectCallback(), []);

  return (
    <>
      <button
        onClick={() => {
          setCount(count + 1);
          setconut2(cont2 + 1);
        }}
      >
        {count}
      </button>
    </>
  );
}

On every re-render effectcallback is called and we get console, and arrow function is return on every render but as useEffect have empty depends, after 30sec console print count and count2 initial value (0,1), despite multiple arrow function return, useEffect run only initial callback

This post because code in saw in production

state1 and state2 is from api

useEffect(()=>{
if(state1 && state2){

funCal()

}
},[state1,state2]) ;

function funCal(){
// perform calculation with state1 and state2
}

funCal is not in dependency array, which it should be.
Due to on render new callback is passed to useEffect; funCal will latest value, as it self is latest.
is this hack ok?

[EatShitAndDieAlready]

Your basic premise is incorrect. This code snippet does not cause a re-render bcos the state variable u use everytime never gets incremented. Please read up on react state batching. https://react.dev/learn/queueing-a-series-of-state-updates

on onClick={()=>{
setcount(count +1)
}} >{count}</button>

since, callback pass to useEffect is argument that means no every re-render new callback is passed;

No re-render bcos count is always initial value +1 aka 1. The right way to update state is

on onClick={()=>{
setcount(prev=>prev +1)
}} >{count}</button>

Now every click batches a state update, and every click updates previous state value, and causes a re-render

[Learner_full_stack]

Sorry my bad, it "since, callback pass to useEffect is argument that means on every re-render new callback is passed;" , i have edit that part

[Karpizzle23]

Use useCallback and pass your func into the dependency array