Updating useState variable after calling async function

Question

I have a function that calls an API like this:

static async getReport(date) {
    const url = reportUrl + date
    const method = 'GET'
    try {
        return await axios({
            url,
            method: method,
            responseType: 'blob'
        })
    } catch (error) {
        return error
    }
}

Than in my component I use this function like this:

async function handleClick() {
    const response = await ReportService.getData(date)
    if (response instanceof AxiosError) {
        setSuccess(false)
        handleClickSuccess()
    } else {
        setData(response)
        drawTable()
    }
}

'setSuccess' and 'handleClickSuccess' functions don't really matter, but in case of successful call to an api I set data from response to 'setData' function which is 'useState' hook. Than I call function 'drawTable' which draws a table based on the state of 'setData' hook. The problem is that by the moment 'drawTable' function is called 'setData' hook is not yet filled with data from call to my api. How do I fix this?

I tried other topics here but they don't seem to help me, correct me If that's not true

I found the best solution in the following topic - [here](https://stackoverflow.com/questions/53253940/make-react-useeffect-hook-not-run-on-initial-render) — trydmi, Dec 27 '22 at 09:44
That is the samething I said but anyways you got your answer. Close the question. :thumbs-up: — Snehil Agrahari, Dec 27 '22 at 10:01
`drawTable` reads from variable immediately, but it will be updated only on next re-render — skyboyer, Dec 27 '22 at 11:06

Snehil Agrahari · Answer 1 · 2022-12-27T09:41:23.577

0

As you know that set functions of useState hook take some time to update the state. Here instead of calling this drawtable function inside async function add a useEffect and add dependency of the data.

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

useEffect(()=>{
if(data.length > 0){
drawTable();
}
},[data,drawTable])

this will fix the asynchronus flow error.

edited Dec 27 '22 at 09:41

answered Dec 27 '22 at 08:33

Snehil Agrahari

307
1
15

I tried it, my components stop loading at all after that and react gives me a warning on a console: "React Hook useEffect has a missing dependency: 'drawTable'. Either include it or remove the dependency array" – trydmi Dec 27 '22 at 08:35
Yeah so there you can add a drawTable dependency too .. also do optional chaining instead of absolute chaining incase of data maping inside drawtable. – Snehil Agrahari Dec 27 '22 at 08:39
The problem now is that on page load useEffect works and there is no way for drawTable to work because there is no data yet, that's why component isn't rendering. What do I do? – trydmi Dec 27 '22 at 08:43
And I do not want it to be called on page load too – trydmi Dec 27 '22 at 08:48
What do I do then? – trydmi Dec 27 '22 at 09:33
that is why i said to use optional chaining when you are mapping data . that simply means when there is no data no rendering will happen and when the data comes the data will be rendered as it is. use `data?.map` instead of `data.map` – Snehil Agrahari Dec 27 '22 at 09:37
or you can use above edited function. – Snehil Agrahari Dec 27 '22 at 09:39
I don't use data.map, I push into an array data from my userState hook – trydmi Dec 27 '22 at 09:39
use the function in answer.. if data is empty the function will not be called – Snehil Agrahari Dec 27 '22 at 09:40

Updating useState variable after calling async function

1 Answers1