React state not updating after one time change through event handler

Question

I have a simple state to handle how much re-records a user can do,

const [retakes, setRetakes] = useState(0);
  const onRerecord = () => {
    console.log(retakes + 1, "rere");
    setRetakes(retakes + 1);
  };

The onRerecord fires every time the user ask for a re-record from react-ziggeo:rerecordings

<ZiggeoRecorder
          apiKey={process.env.ZIGGEO_API_TOKEN}
          video={videoToken}
          onProcessed={onProcessed}
          recordings={3}
          onRerecord={onRerecord}
        />

On first re-record the state updates just fine, however after that the state still the same, It just didn't change at all, You can see here how the console.logs for 1 "rere" is the same everytime.

Answer 1

Try this- update previous state.

const [retakes, setRetakes] = useState(0);
  const onRerecord = () => {
    console.log(retakes + 1, "rere");
    setRetakes(retakes => retakes + 1);
  };

Answer 2

ZiggeoRecorder appears to be caching the first reference of onRerecord and use the same instance afterwards.

And as your onRerecord closes-over retakes it always uses the same value on future invocations:

You can use functional variation of useState to work around this problem:

setRetakes(retakes => retakes + 1);