You can use isMounted
React pattern to avoid memory leaks here.
In your constructor:
constructor(props) {
super(props);
this._isMounted = false;
// rest of your code
}
componentDidMount() {
this._isMounted = true;
this._isMounted && this.getImage(this.props.item.image);
}
in your componentWillUnmount
componentWillUnmount() {
this._isMounted = false;
}
While in you getImage()
async getImage(img) {
let imgUri = await Amplify.Storage.get(img)
let uri = await CacheManager.get(imgUri).getPath()
this._isMounted && this.setState({
image: { uri },
ready: true
})
}
A recommend approach to use Axios which is based cancellable promise pattern. So you can cancel any network call while unmounting the component with it’s cancelToken subscription
.
Here is resource for Axios Cancellation