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

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