I am quite new in react native and found simple solution from tutorial for fetching&loading case
export const useFetching = (callback) => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const fetching = async(data) => {
try{
setIsLoading(true);
await callback(data);
} catch(e) {
setError(e.message);
} finally {
setIsLoading(false);
}
}
return [fetching, isLoading, error];
}
I use it with signUp func from react-navigation docs as a callback, which is supposed to change the screen to main app:
signIn: async (data) => {
const token = await AuthManager.login(data);
if (token)
dispatch({ type: 'SIGN_IN', token: 'dummy-auth-token' });
But when I call it I get "Can't perform a React state update on an unmounted component". I found out that:
useEffect(() => {return () => {}},[]) inserted into login screen removes the problemI'm wondering, is there any normal solution in this case and why useEffect helps here?
Changing state on unmounted component is illegal measure in react.
This is simple events plan in your component life cycle:
catch(e) { setError(e.message); }, but there is problem - setState (setError).finally block code executed too, so you must check is component mounted before setState.