MENU


Remembering States

Below, the number on the left button will be incremented from zero to one, on the first click of the button, as the first call to the callback always runs. Only after three clicks on the left button do the numbers change. It can be incremented by one again after clicking on the right button at least once.The callback still runs till completion every time the left button is clicked. However, if the value of 'b' or 'c' has not changed, it will run an old version of the callback where the state 'a' has the old value.
RESETRUNFULL
function Example(){
   const [a,setA] = React.useState(0);
  const [b,setB] = React.useState(0); const [c,setC] = React.useState(0);
   let i=0;
  const memoizedCallback = React.useCallback(
      msg => {
        console.log(msg,a);
        setA(a+1);
        i++;
        if (i%3==0){
          setB(b+1);
          setC(c+1);
        }
      },
      [b,c]
  ) return (<React.Fragment> <button onClick={()=>memoizedCallback('Hi there: ')}>{a}</button>
  <button onClick={()=>setB(b+1)}>{b}</button> </React.Fragment>);} ReactDOM.render(<Example/>,document.querySelector("div"));

The array of dependencies is not passed as arguments to the callback. Conceptually, though, that's what they represent: every value referenced inside the callback should also appear in the dependencies array.