Set state inside async function using stateless React

Question

I have a simple react form, for which I have an async function used on the "onBlur" event of one of the fields. I wanted to check an info in the backend and then update some fields based on the response.

The thing is that setting the states are behaving really strange. It seems sometimes it populates it, and sometimes not. Do I need to do something "special" to set states in an async function?

async function handleEmailBlur(event: ChangeEvent<HTMLInputElement>) {
. . .
                        const {id} = data[0]
                        let toSave = data[0]
                        delete toSave.id
                        const toSaveC = toSave

                        console.log("===> To Save")
                        console.log(toSave)

                        setId(id)
                        setRecoveredData({...toSaveC})

                        console.log("===> Recovered Data")
                        console.log(recoveredData)
. . . 
}

In this example, although toSaveC has data, with the same field names, RecoveredData shows no data in the end.

You are logging a stale closure log it outside the handleEmailBlur function and it'll be fine — HMR
– HMR, Commented Jun 13, 2020 at 19:45

adel · Accepted Answer · 2020-06-13 20:08:30Z

2

Because react update state asynchronously, use useEffect hook to check state change like this:

useEffect(()=>console.log(recoveredData),[recoveredData])

this effect will fire when recoveredData change.

answered Jun 13, 2020 at 20:08

adel

3,5051 gold badge10 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rdrgtec Over a year ago

Great, tks! I wasn't sure this was the correct way to do that!!

Collectives™ on Stack Overflow

Set state inside async function using stateless React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related