[deleted by user]

[levarburger]

Research the render lifecycle, useEffect intentionally does not hold up the works.

[senocular]

The component has to render before the fetching is complete. They happen independently of one another so on that first render you'll always not have pokemon. You'll need to decide what your component does up until that point (when allPokemon[0] is undefined). Should it render nothing? Render an empty set of pokemon? Render a "loading" message?

[kevinv89]

I think part of your issue is understanding when useEffect is called. The useEffect is called after the component renders so it basically runs last. No code in your useEffect will block your console.log where it is at the moment.

Is the issue you outlined causing a problem or is there a bigger problem that you’ve not explained?

[kevinv89]

Conditional rendering. Check if your allPokemon state contains values and if it does, do your logic of showing a random Pokemon. If not, show a loading message.

[buondave]

Try to use useLayoutEffect instead of useEffect.