useEffect Memory Leak in AWS Amplify Storage.get function - reactjs

Question

I have a pretty simple component in React that gets an image name and then displays it using the code below. It works fine but when I leave the page and then come back to it, I get a memory leak. Perhaps there is something basic about effects I am not understanding:
import React, {useState, useEffect} from 'react';
import {Storage} from 'aws-amplify';
const S3Image = ({photoName, ...props}) => {
const [imageURL, setImageURL] = useState("")
useEffect(() => {
var response = ""
async function s3Fetch() {
if (photoName !== "") {
response = Storage.get(photoName);
const data = await response;
setImageURL(data);
}
}
s3Fetch();
}, [imageURL])
return (
<>
{ imageURL === "" ?
null
:
<img {...props} src={imageURL} alt={photoName} />
}
</>
)};
export default S3Image
If I return a function at the end to clean up like:
return () => usetImageUrl("")
Then it goes in a crazy loop of rendering and then re-rendering.
Thanks for any help!

Answer 1

You are updating the imageURL in the effect and also rerun the effect if the url changes => Loop.
You need set the dependency array to [photoName] since that's the variable you are listening for and is the deciding factor in the fetch function:
import React, {useState, useEffect} from 'react';
import {Storage} from 'aws-amplify';
const S3Image = ({photoName, ...props}) => {
const [imageURL, setImageURL] = useState("")
useEffect(() => {
var response = ""
async function s3Fetch() {
if (photoName !== "") {
response = Storage.get(photoName);
const data = await response;
setImageURL(data);
}
}
s3Fetch();
}, [photoName])
return (
<>
{ imageURL === "" ?
null
:
<img {...props} src={imageURL} alt={photoName} />
}
</>
)};
export default S3Image
If you have a linter installed, it should tell you that as well.

Answer 2

#Domino987 answer was really helpful, but I needed to add the logic with "componentIsMounted" variable to get rid of the warning. We set the variable as false in the cleanup function of the useEffect. This way, we only set the imageUrl if the component is mounted.
import React, { useState, useEffect } from 'react';
import { Storage } from 'aws-amplify';
const S3Image = ({ imgKey, ...props }) => {
const [imageURL, setImageURL] = useState('');
useEffect(() => {
async function s3Fetch() {
if (imgKey !== '') {
try {
return Storage.get(imgKey, { level });
} catch (e) {
console.error(e);
}
}
}
let componentIsMounted = true;
s3Fetch().then((url) => {
if (componentIsMounted) {
if (url) setImageURL(url);
}
});
return () => {
componentIsMounted = false;
};
}, [imgKey]);
return (
<>
{imageURL === '' ? null : (
<img {...props} src={{ uri: imageURL }} />
)}
</>
);
};
export default S3Image;