Recoil State is not updating properly

Question

I have the following code.

const [verificationValues, setValues] = useRecoilState(verificationFormValues);
setValues({
   ...verificationValues!,
   nidOrPassport,
   addressProof,
   recentPhoto,
   bankAccountStateMents,
   businessProof,
   salarySlip,
   employeeIdCard,
});

After I submit a form, I am calling the setValues function. When I am console logging this verificationValues, it didn't update verificationValues. But if I console log the values after my submit handler then it works and shows the updated value. Also, I just noticed that it works after I press submit button again. Also setValues function is not async to take some time to complete. So why is this happening? I am so confused right now. Thanks in advance.

Important

Those nidOrPassport, addressProof, recentPhoto, etc. are objects

Pryer

Answer 1

It turned out it's actually a react problem. The setValues is updating the value but the updated value can only be accessed on the next render. So I have to use a useEffect hook and now it's working.

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

Update July 2022

React Now Supports Automatic Batching. So if you use React 18 or older, then you can avoid this problem by using flushSync.

Learn More on Github Discussions

Pryer