Conditional rendering not working after a timeout delay in ReactJS - reactjs

Question

I'm building a simple website with ReactJS (using the Gatsby framework) and trying to handle some conditional rendering using states and React hooks. What I'm trying to accomplish is to basically have a welcome message display for 4 seconds and then render different content.
Here's the code for the render state change (Note: there are two different newGame states because one renders if it's the first time the user sees this screen, and the other renders if they're returning to the site through cookies).
useEffect(() => {
if ((welcomeScreen === true && phase === 'newGame') || (welcomeScreen === true && phase === 'newGamePlus')) {
const timer = setTimeout(() => {
setPhase('gameStart');
setWelcomeStatus(false);
}, 4000);
return () => clearTimeout(timer);
}
}, [phase, welcomeScreen]);
And here is my state management chain. This may be very unorthodox/clunky since I'm quite new to this, so please feel free to correct my mistakes or guide me towards a better path.
if (phase === 'index') {
return (
<Layout>
<div className="mainContainer">
<h1>Enter your name~</h1>
<form onSubmit={handleClick}>
<input
className="nameInput"
onChange={handleChange}
type="text"
placeholder="What's your name?"
value={name}
/>
<button type="submit" className="nameButton">Submit</button>
{ showErrorMessage ? <ErrorText /> : null }
</form>
</div>
</Layout>
)
} else if (phase === 'newGamePlus' && welcomeScreen === true) {
return (
<Layout>
<div className="mainContainer">
<h1>Welcome back, {cookies.get('userName')}~</h1>
</div>
</Layout>
) }
else if (phase === 'newGame' && welcomeScreen === true) {
return (
<Layout>
<div className="mainContainer">
<h1>Welcome, {savedName}~</h1>
</div>
</Layout>
)
} else if (phase === 'gameStart' && welcomeScreen === false) {
return (
<Layout>
<div className="mainContainer">
<h1>Time to play!</h1>
</div>
</Layout>
)
};
The intended effect is to simply have the welcome screen display the content in the final 'gameStart' phase. At the moment, there is a 4 second delay, and then the site crashes with a 'no render' error message from React. I'd greatly appreciate some insight into what I'm doing terribly wrong here, I'm sure it's probably multiple things!
Thanks!

Answer 1

When using setTimeout(), state updates are not batched. In your codes, setPhase('gameStart') will trigger a state change, so useEffect will be executed again, and setWelcomeStatus(false) will be skipped. You will always end up with phase === 'gameStart' && welcomeScreen === true.
Possible solution:
use only one setState in useEffect, so you need to change the variable phase and welcomeScreen to an object variable instead of two separate variables.