'Changes not showing even though React state successfully changes and component rerenders

In my React App I'm calling an API to retrieve some images then display them. I currently have something like this:

const [images, setImages] = useState([]);

...

const getImages = async () => {
    let newImages = [];
    let data = fetch("url");
    data.then(response => response.json()).then(d => newImages.push(d));
    setImages(newImages);
};

const renderImages = () => {
    return (
        <div>
            {images.map((item, index) => (
                <img src={item.image} alt="something" key={index} />
            ))}
        </div>
    );
};

...


return (
    <div>
        {images && renderImages()}
    </div>
);

With logging I checked that the API did retrieve data and it is correctly stored in the newImages array before I use setImages(newImages). In a separate useEffect, I even logged the contents of images and it contained the intended data. To my knowledge, after the state change React should rerender and the new images should show up, but nothing changes. However, when I change something in VS Code (just adding a comment), which compiles again, the images show up as expected. If I am to assume React does render after I setImages, why do the images not display? I was reading about callbacks, but I don't need to execute any more code after images is updated; I only need to have renderImages reflect the updated images data in the JSX return.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source