In react-native app, I'm getting 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 %s.%s, a useEffect cleanup function
I've seen a few posts similar to this problem but I'm having problems making them connect to my problem.
The app is not broken, it's just getting this nasty warning that I would really like to fix. The warning mentioned using a useEffect cleanup function, but I wasn't even using useEffect in the component at the time, so I decided to add one, but it didn't help.
useEffect( () => {
if (action) {
let controller = new AbortController();
const loadData = async () => {
try {
const response = await fetch( action, { signal: controller.signal } );
const data = await response.json();
if ( data ) {
setIdKey( data );
setIsValid( true );
setLoggedIn( true )
setBadCreds( false );
setAuthenticating( false );
setHasLoggedIn( true );
console.log('has logged in: ' + hasLoggedIn);
} else {
setContainerHeight( 20 );
setBadCreds( true );
setIsValid( true );
setAuthenticating( false );
}
}
catch ( error ) {
setAuthenticating( false );
if ( error.name == 'AbortError' ) {
console.log( 'FetchCancel: caught cancel' );
} else {
console.log( error.message );
throw error;
}
}
};
loadData();
return () => {
console.log( 'FetchCancel: unmounting' );
controller.abort();
}
}
}, [action] );
I'm using react hooks throughout and don't have any experience with the older methods.
The error is technically reporting this from the parent component.
Is there something obvious I'm missing?
