React - Loading images in conditional rendering - performance issue

Question

I have a React application in which after clicking on the buttons I change the categories and each category has its own layout with text and images.

The problem is that I conditionally render this layout using switch/case and every time the content is redrawn, the images that were already downloaded once are downloaded again.

I've tried using images created by webpack, I've tried using images from the public directory and I've also tried using Promise for asynchronous loading... but it doesn't seem to matter. The initiator in all cases is react-dom.development.js

I can use ServiceWorker for faster loading, but I would like to avoid re-downloading the images.

I use Hookstate for state management.

Here is a variant with asynchronous image loading:

Main component, where I conditionally render individual layouts (Content.jsx)

import { suspend, useHookstate } from "@hookstate/core";
import { imagesData } from "../state/images";
import { generalData } from "../state/store";

const Content = () => {

    const category = useHookstate(generalData);
    const images = useHookstate(imagesData);

    switch (category.selected.value) {
        case "category1":
            return (
                <div className="flex flex-col items-center md:px-10">
                    <img src={suspend(images) ?? images.img1.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                    <p>Text 1</p>
                </div>
            )
        case "category2":
            return (
                <div className="flex flex-col items-center md:px-10">
                    <h1>Heading...</h1>
                    <img src={suspend(images) ?? images.img2.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                    <img src={suspend(images) ?? images.img3.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                    <p>Text 2</p>
                    <img src={suspend(images) ?? images.img4.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                    <p>Text 3</p>
                </div>
            )
        case "category3":
            return (
                <div className="flex flex-col items-center md:px-10">
                    <p>Text 4</p>
                    <img src={suspend(images) ?? images.img5.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                    <p>Text 5</p>
                    <img src={suspend(images) ?? images.img6.value} className="max-w-[120px] sm:max-w-[140px] w-full h-full rounded-3xl" alt="..." />
                </div>
            )

        default: return (
            <div className="flex flex-col items-center md:px-10">
                <p>Empty..</p>
            </div>
        )
    }
}

export default Content;

Global storage of images (images.jsx)

import { hookstate } from "@hookstate/core";

const getImages = () => new Promise((res) => {
    setTimeout(() => {
        res({
            img1: "/assets/images/img1.jpg",
            img2: "/assets/images/img2.jpg",
            img3: "/assets/images/img3.jpg",
            img4: "/assets/images/img4.jpg",
            img5: "/assets/images/img5.jpg",
            img6: "/assets/images/img6.jpg"
        });
    }, 100);
});

const imagesData = hookstate(getImages);

export {
    imagesData
}

I set individual categories in another component for example by onClick={() => general.selected.set("category3")}

The result I see in devtools: DevTools - Network - Repeated image downloads

Can you advise me how to solve this problem? Thank you in advance.