I'm pretty sure the problem with the null request is connected to a missing guard.
When react renders your component the imgData is null. According to docs on the first render, React builds your component then injects it into the DOM, and only then runs useEffects.
In our case:
1) We have the state imgData with the value null.
2) React build component and inject this
<Img
id="imageZoom"
src={imgData} // Keep in mind this state is still null
alt={alt}
style={{ opacity: zoomed }}
width={width}
height={height}
/>
to DOM.
3) Browser requests the image with src null
4) Only then the React runs UseEffect with the correct image src.
I'm pretty sure the problem with the null request is connected to a missing guard.
When react renders your component the imgData is null. According to docs on the first render, React builds your component then injects it into the DOM, and only then runs useEffects.
In our case: 1) We have the state imgData with the value null. 2) React build component and inject this
to DOM. 3) Browser requests the image with src null 4) Only then the React runs UseEffect with the correct image src.
My changes should prevent this null request