Why is my state not updating when called in useEffect()? - reactjs

Question

Have an annoying little bug in my application, which I am not sure is thanks to Redux states or something wrong with how I updated a internal state in React in a useEffect(). Either way I cannot seem to find an answer
I have a few console.log() throughout to try to better understand this.
I have a state in my App component, const [loading,setLoading] = useState(true) which determined where the page is loading, and if it is, returns a "loading" message on screen until all operations are completed. Inside my useEffect, depending on whether it is able to find a user in local storage, updates the state loading to false if there is a user found or if there isn't. When loading is false, the rest of applications routes are able to be rendered.
The issue I am having though, is that it seems as if my state does not initially update inside useEffect?
I do not have Strict mode because I am trying to see whats going on.
I have included a pic of my console logs, to give you an idea. As you can see after the useEffect is ran, even though it should updated loading state to false, upon rendering it has not updated, but somehow the dispatch inside useEffect has ran, because it shows the redux state has updated. Makes no sense to me.
After that, the App is loaded again, and somehow the loading state is not correct? Makes no sense to me
// React
import { useEffect, useState } from 'react'
// Redux
import { useSelector, useDispatch } from 'react-redux'
// React Reducer
import { Routes, Route } from "react-router-dom"
import { loginUser, logoutUser } from './reducers/user';
// Components
import Login from './components/Login';
import Player from './components/Player';
function App() {
console.log("app start")
const dispatch = useDispatch()
const user = useSelector(state => state.user)
console.log("user:",user)
const [loading,setLoading] = useState(true)
console.log("state:", loading)
useEffect(() => {
console.log("in app effet")
const loggedUserJSON = window.localStorage.getItem('loggedUser')
if (loggedUserJSON) {
console.log("inside json conditional")
const user= JSON.parse(loggedUserJSON)
dispatch(loginUser(user))
setLoading(false)
return
}
setLoading(false)
}, [])
// If loading is false
if (loading === false) {
return (
<div>
{user && <h1><button onClick={() => dispatch(logoutUser())}>LOG OUT</button></h1>}
<Routes>
<Route path="/" element={!user ? <Login/> : <h1>Home</h1>} />
<Route path="/player/:username" element={<Player/>}/>
{user && <Route path ='/store' element={<h1>STORE</h1>}/>}
</Routes>
</div>
)
}
console.log("end of app component")
// If Loading is true, not updated
return (
<h1>LOADING</h1>
);
}
export default App;

Answer 1

Try this, you may not get the correct value of loading just by console.log as batch process happens for the set state.
// React
import { useEffect, useState } from 'react'
// Redux
import { useSelector, useDispatch } from 'react-redux'
// React Reducer
import { Routes, Route } from "react-router-dom"
import { loginUser, logoutUser } from './reducers/user';
// Components
import Login from './components/Login';
import Player from './components/Player';
function App() {
console.log("app start")
const dispatch = useDispatch()
const {user} = useSelector(state => state.user)
console.log("user:",user)
const [loading,setLoading] = useState(true)
console.log("state:", loading)
useEffect(() => {
console.log("in app effet")
const loggedUserJSON = window.localStorage.getItem('loggedUser')
if (loggedUserJSON) {
console.log("inside json conditional")
const user= JSON.parse(loggedUserJSON)
dispatch(loginUser(user))
//setLoading(false)
}
setLoading(false)
}, [])
// If loading is false
if (!loading) {
return (
<div>
{user && <h1><button onClick={() => dispatch(logoutUser())}>LOG OUT</button></h1>}
<Routes>
<Route path="/" element={!user ? <Login/> : <h1>Home</h1>} />
<Route path="/player/:username" element={<Player/>}/>
{user && <Route path ='/store' element={<h1>STORE</h1>}/>}
</Routes>
</div>
)
}
else
return <h1>LOADING</h1>
// console.log("end of app component")
// If Loading is true, not updated
}
export default App;