In my React project, I need to fetch an image and then create the image tag in the page. My (simplified) code is like this:

const App => {
    const [image, SetImage] = useState('');
    useEffect(
        async function fetchImage() {
            //...
            await response = fetch('API-to-get-base64-image');
            SetImageURL(response);
        }, []);

    return (
        <div><img src={image}/> </div>
    )
}

I only need this useEffect to run once, but as many posts pointed out (such as How to call loading function with React useEffect only once), as of React 18, setting the dependency as an empty array no longer does the trick. As I am fetching a base64 encoded image which is quite large, running this useEffect twice forces the browser to fetch the image twice and thus the page loading becomes slow. I wonder what is the new solution, as in React 18, to let useEffecti run only once?