React state does not update immediately

Asked Sep 16 '22 at 09:13

Active Sep 16 '22 at 09:51

Viewed 35 times

I am trying to make use of react-otp-input package by disabling the OTP input for 5 seconds if the OTP input value is reached. The issue I encounter is that the state does not get properly updated. I have prepared a Codesandbox example, which shows that the otp length is not calculated properly when you start deleting characters and is one state behind. What might cause this issue?

Codesandox link: https://codesandbox.io/s/dazzling-rhodes-klqyhp?file=/src/App.js

Updated: This can not be placed in the useEffect hook, as the setInterval function never counts down!

edited Sep 16 '22 at 09:51

asked Sep 16 '22 at 09:13

Aleksandrs

I have tried utilizing the useCallback hook, which also has no effect. Try filling the OTP input, and then remove 2 characters :c – Aleksandrs Sep 16 '22 at 09:14
`if (otp.length + 1 === 6) {` needs to be placed in `useEffect` of `otp`. setState is an async function. – Rajesh Sep 16 '22 at 09:26
@Rajesh, how shall the countdown work then!!?? – Aleksandrs Sep 16 '22 at 09:52
Updated your sandbox https://codesandbox.io/s/sad-sinoussi-defu19 – Rajesh Sep 16 '22 at 09:55
@Rajesh thanks a lot! This one worked, as I have totally forgotten I can set those up multiple times! :)) – Aleksandrs Sep 16 '22 at 10:19
If you would still like this question to be reopened, please put the code in the question itself. – Sasha Kondrashov Sep 30 '22 at 18:34

React state does not update immediately

0 Answers0