React Native - Setting state in fetch promise

user_5982721 0
Viewed 42

I have a fetch operation to receive coordinates into map markers. It works but it gives this error

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at Screens/MapPage.js:71:45 in fetch.then.then$argument_0

The error line is in setLocations(result.data). The application works fine but I realized this error only occurs when I switch screens without waiting fetch completed. If I go back to home page without waiting setLocations is fetched. Is there better way to set the state into fetch result? I don't understand Where I am doing wrong?

        fetch(baseUrl + "api/Product/GetAllProductLocalization", requestOptions)
            .then(response => response.json())
            .then((result) =>  {setLocations(result.data);} )
            .catch(error => console.log('error', error));
promise use-state react-native fetch
1 Answers

You are getting this error most likely because some update before setLocations(result.data) is unmounted the component you called the fetch in.

Meaning, setLocations(result.data) is trying to update the state of a component that has been unmounted at which point it throws a warning.

As a friendly recommendation, you should probably check out react-query library, as well as axios instead of fetch.

You can check the docs on their site

https://react-query.tanstack.com/guides/query-cancellation#using-fetch

user_77847690
Related