useEffect not setting react hooks

Question

I have an useEffect function that looks like this.

    useEffect(() => {
        getColls()
        console.log(pageColl)
    }, [])

The getColls() functions sets the pageColl variable.

//getColls()
    const getColls = () => {
        Service.getCollections()
        .then(data => 
            setPageColl(data.collections.find(coll => coll._id === userId))
        )
    }
//states
const [pageColl, setPageColl] = useState(null);

The pageColl should be set to an object but for some reason when I try to console.log(pageColl), I get returned a null. It is as if the setPageColl was never called. I know the data was returned in getColls as I can console.log it there.

Sounds like the .find(coll => coll._id === userId) does not find a match? Double check the result before calling setPageColl to debug — CertainPerformance
Does this answer your question? Why does my state not update right away in console log — skyboyer

sivarasan sivarasan · Accepted Answer · 2020-08-30T06:57:19

you can't check "pageColl" state immediately after call getColls() method, because api call is asynchronous.

 useEffect(() => {
    console.log(pageColl)
}, [pageColl])

you can check like above

useEffect not setting react hooks

1 Answers