Do something right after calling useCallback

Question

I am calling useCallback hook and passing it data returned from an api. The useCallback hook is formatting the returned data and setting it in the state

I expect updated data right after calling the useCallback hook. My question is, will I get updated data in the very next line after calling useCallback hook? Moreover, what can I do to ensure that I do get updated data?

Here is how the code looks like:

const [data, setData] = React.useState([]);

const processPeople = React.useCallback((peopleData) => {

 // we will do a lot of formatting here on peopleData and then will do:
 setData(peopleData)

}, []}

const loadOptions = React.useCallback((callback) => {
    getPeopleData({  // calling API
      variables: {
        perPage: 20,
        page: 1,
      },
    }).then((response) => {
       processPeople(response) // This is a lengthy callback which processes response
       console.log(data)       // How to make sure I get updated data here?
       // callback(data) This is a built-in method of a library which requires updated data
      // Please see loadOptions is a library's method
    }
}, [data] }

return(
  <SingleAsyncSelect
    options={peopleDataOptions}
    getOptions={loadOptions}
    selectOption={handleAdd}
  />
)

no setState is async , console.log will get executed before processPeople finsisjes executing — Faizal Hussain, Aug 01 '22 at 11:45
Does this answer your question? [Why does calling react setState method not mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-does-calling-react-setstate-method-not-mutate-the-state-immediately) — Konrad, Aug 01 '22 at 12:26
You have the `data` already in this place, it's just called `response` — Konrad, Aug 01 '22 at 12:28

orabis · Answer 1 · 2022-08-01T17:05:59.893

The quick answer is "no".

Is there a reason you are not calling setData directly instead of wrapping it within processPeople?

Please note that you must ensure that your useCallbacks use the same deps; otherwise, you will have unsynced values; i.e data. Technically, this should not be a problem in your example in processPeople, which receives the value by the invoker.

For the main question, which primarily focuses on this couple of lines:

processPeople(response) // This is a lengthy callback which processes response
console.log(data)       // Will I get updated data here?

No, data will not get updated right away as setState is async. Data's value is received from your useCallbacks deps; i.e the last line in your code snippet.

I am not entirely sure what you are trying to do, but as long as you pass in the variables you need to you hooks' deps, you will get the updated values. Again, it is async, but in the next render, you will get the updated value.

I have updated my question, I require data to be updated as I have to send it back to a library, even if its not possible, there should be a better way to do it — Khurram W. Malik, Aug 01 '22 at 12:11

Do something right after calling useCallback

1 Answers1