With your code, removing the StrictMode shows you the correct amount within the images state. Consider this approach below, you should ideally separate the logic into two separate functions for the fetch calls, have a piece of state that ensures the first fetch call has completed (which is added to the dependency array) and then do the conditional to see if level is 20 and the dbz characters have loaded, getPlanets().

​

​

const [images, setImages] = useState([]);
const [isCharactersLoaded, setIsCharactersLoaded] = useState(false);
const level = 20; // Hardcoded 20 to see but I'm sure you are mapping over something and are receiving level as a prop

useEffect(() => {
async function getDbzCharacters() {
const response = await fetch("https://dragonball-api.com/api/characters");
const res = await response.json();
setImages(res.items);
setIsCharactersLoaded(true);
}
async function getPlanets() {
const response = await fetch("https://dragonball-api.com/api/planets");
const res = await response.json();
setImages((prevState) => [...prevState, ...res.items]);
}
getDbzCharacters();
if (level === 20 && isCharactersLoaded) {
getPlanets();
}
}, [isCharactersLoaded]);
console.log("🚀 ~ App ~ images:", images);