React Context old state value in api call

Question

I have a component which represents a page. This page has a form. Submitting that form sets the new state in context and uses this new state in the api call. The problem is that old value of the state is visible in api call.

Code structure looks something like this

export const Component = () => {
    const { userAnswers, setUserAnswers } = myCustomHook(); // hook based on context
    const { saveAnswersOnBackend } = useSaveAnswers()

    const handleFormSubmit = async () => {
     setUserAnswers(prev => ({
      ...prev,
      userConsent: values.userConsent, // "values" comes from Formik
    }))
    
    try {

      await saveAnswersOnBackend({ // api call.
        userAnswers: {
          userConsent: userAnswers.userConsent, // old userConsent value is sent all the time
        },
      })

    } catch (err) {
      handleError(err)
    }

}

}

Thanks in advance :)

Looks like you're calling `saveAnswersOnBackend` at the top-level of your component? Should that be in `handleFormSubmit` or in an effect instead? — bryce, Jun 22 '22 at 16:32

score 1 · Answer 1 · answered Jun 22 '22 at 16:34

1

React doesn't immediately update state when you set a new state-- it queues up the change, and will update before the next render. So your "setUserAnswers" call doesn't mean usetAnswers will be different in your try block.

Instead of using your state in the second call, directly use the value you set your state to be, values.userConsent

answered Jun 22 '22 at 16:34

Nathan

73,987
14
40
69

I'd prefer to keep the state fresh but I think that Your suggestion would work fine for now :) Thanks – AdamKniec Jun 23 '22 at 21:56

React Context old state value in api call

1 Answers1