State does not update in async function

Question

Could you please help me understand why my state was not updated when I called two async functions in the first useEffect? and what is the best way to handle async data in the case that I don't know which one comes first (API1 or API2)?

Thank you!

const MyClass = () => {
    const [myState, setMyState] = useState([]);

    useEffect(() => {
        callApi1();
        callApi2();
    }, []);

    const callApi1 = () => {
        fetch(...).then(result => {
            // the result of API 1 always comes first and result is not empty
            setMyState(result);
        )};
    }

    const callApi2 = () => {
        fetch(...).then(result => {
            // the result of API 2 always comes 5 - 10 seconds after the API 1
            console.log(myState) => [], WHY?
        });
    }
}

[This](https://stackoverflow.com/q/54069253/1541563) answers the first part of your question. — Patrick Roberts, Jan 02 '21 at 10:24
You can wait for the 1st response then request for 2nd response? — Nooruddin Lakhani, Jan 02 '21 at 11:30
@NooruddinLakhani I don't think it is good because the 2nd request takes a lot of time, we can not wait. — Trong Lam Phan, Jan 02 '21 at 12:37
With regards to the responses, if you want to wait for both, you might add a method which will be called on receiving each result and will only do something on the second call — Nadia Chibrikova, Jan 02 '21 at 15:31

score 2 · Answer 1 · answered Jan 02 '21 at 16:34

(1.) "... why my state was not updated ..."

Your state was updated, but the callback function captures the old state of myState (as a closure). That means myState inside the callback function will always stay the same as it was when the function was created. (And it is created only when callApi2() is invoked.)

You can not access the current up-to-date state inside an asynchronous callback.

(2.) "...best way to handle async data in the case that I don't know which one comes first"

It depends on your use case.
Generally, you would set some states from your callbacks (e.g. your setMyState(result)), and a different part of your program will do something else dependent on these states, e.g. useEffect(()=>{ /* do something */ }, [ myState ]).

e.g.:

const MyClass = () => {
    const [myState, setMyState] = useState([]);
    const [myState2, setMyState2] = useState([]);
    const [allDone, setAllDone] = useState(false);

    useEffect(() => {
        callApi1();
        callApi2();
    }, []);

    useEffect(() => {
        console.log( 'myState/myState2:', myState, myState2);
        if( myState.length && myState2.length ){
            setAllDone(true);
        }
    }, [ myState, myState2 ]);

    const callApi1 = () => {
        fetch(...).then(result => {
            setMyState(result);
        )};
    }

    const callApi2 = () => {
        fetch(...).then(result => {
            setMyState2(result);
        });
    }
}

State does not update in async function

1 Answers1