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.

Nothing appears to be wrong here. It will be interesting to see the code for `ZiggeoRecorder` however. — , Mar 06 '20 at 08:59
@Regnidorhcs, This is pretty much the implementation for ziggeo, nothing other than `import { ZiggeoRecorder } from "react-ziggeo"` — MMJ, Mar 06 '20 at 09:02
Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) — Drew Reese, Mar 06 '20 at 09:08
Did you add this part to your code? useEffect(() => { if (recorder) { // DO stuff here recorder.on("any_event", function (rec) { ... }, recorder); recorder.get("attribute_name"); } }, [recorder]); — BlackSheep, Mar 06 '20 at 09:09
Just wanted to mention that the `recordings={3}` will limit everyone to 1 recording and up to 2 re-recordings following that (3 recordings in total). It should be all automatic, without any additional checks needed on your end. By using onRerecord you could be aware that it did happen and how many times. — Bane D, Mar 07 '20 at 06:30

score 1 · Accepted Answer · answered Mar 06 '20 at 09:01

1

Try this- update previous state.

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

answered Mar 06 '20 at 09:01

akhtarvahid

9,445
2
26
29

score 0 · Answer 2 · answered Mar 06 '20 at 09:14

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);

React state not updating after one time change through event handler

2 Answers2