this is what i m trying, in the functions of conrtrolFirstLaunch and getAuthentication i m getting the log of both data and auth but state isnt updating, i dont know why is this happening but before implementing first launch it worked fine
import React, { useState, useEffect } from "react";
import { isAuthenticated, firstTimeLaunch } from "Services/Auth";
import { Redirect } from "expo-router";
const Home = () => {
const [authenticated, setAuthenticated] = useState(null);
const [firstLaunch, setFirstLaunch] = useState(null);
useEffect(() => {
controlFirstLaunch();
getAuthentication();
}, [authenticated, fisrtLaunch]);
const controlFirstLaunch = async () => {
let data = await firstTimeLaunch();
setFirstLaunch(data);
};
const getAuthentication = async () => {
let auth = await isAuthenticated();
// console.log(auth);
setAuthenticated(auth);
};
if (firstLaunch) {
return <Redirect href={"onBoarding"} />;
} else if (authenticated) {
return <Redirect href={"authStackTabs"} />;
} else return <Redirect href={"unAuthStack"} />;
};
export default Home;
I have tried by using another state called isLoading and many other solution but nothing worked
New contributor
noobCoder is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
0
The component renders then the effects run, so <Redirect href={"unAuthStack"} /> will be rendered and effected prior to the effects running and enqueueing any state updates.
Using a loading state and waiting for both side-effects to complete is likely what you need to do.
Example:
const Home = () => {
const [isLoading, setIsLoading] = useState(true);
const [authenticated, setAuthenticated] = useState(null);
const [firstLaunch, setFirstLaunch] = useState(null);
useEffect(() => {
const loadData = async () => {
try {
// Wait for both calls to resolve
const [data, auth] = await Promise.all([
firstTimeLaunch(),
isAuthenticated(),
]);
setFirstLaunch(data);
setAuthenticated(auth);
} catch(error) {
// handle/ignore any errors/rejections
} finally {
// then clear the loading state after success/failure
setIsLoading(false);
}
};
loadData();
}, []); // <-- empty dependency, run once on component mount
// Check if component is still loading data
if (isLoading) {
return null; // or loading indicator/spinner/etc
}
if (firstLaunch) {
return <Redirect href={"onBoarding"} />;
} else if (authenticated) {
return <Redirect href={"authStackTabs"} />;
}
return <Redirect href={"unAuthStack"} />;
};
1