- After a customer logs in, I want to show them a welcome page that automatically redirects them to another page after 5 seconds. To achieve this, I initially set the state with a default value of 5 seconds and then used setInterval to count down by 1 every second until it reaches 0, at which point the customer is redirected.
The issue is that console.log() always shows 5, so despite my efforts, the frontend continues to display the message: Welcome, you have successfully logged in, you will be redirected in.. 4
This discrepancy occurs because setRedirectSeconds() is asynchronous and does not update the state immediately. Consequently, each time the setInterval function restarts, redirectSeconds remains at 5.
How can I resolve this problem?
Below is the code snippet in question:
const Welcome: NextPage = (): ReactElement => {
const [redirectSeconds, setRedirectSeconds] = useState<number>(5);
const router = useRouter();
const query = router.query;
useEffect(() => {
if (query?.redirect) {
setTimeout(() => {
const interval = setInterval(() => {
console.log(redirectSeconds);
if (redirectSeconds > 0) {
setRedirectSeconds(redirectSeconds - 1);
} else {
clearInterval(interval);
router.push(query.redirect.toString());
}
}, 1000)
}, 1000);
}
}, []);
return (
<div>
Welcome, you have successfully logged in, you will be redirected in.. {redirectSeconds}
</div>
);
};
export default Welcome;