React中useEffect内调用setState后状态未更新的问题排查

我遇到一个棘手的小问题，不确定是Redux状态导致的，还是React中useEffect更新内部状态的方式有问题，目前还没找到解决方案。

我加了很多console.log()来排查问题：

• 在App组件里定义了状态const [loading, setLoading] = useState(true)，用来判断页面是否处于加载状态：为true时显示"LOADING"提示，直到所有操作完成后才渲染应用的其余路由。
• useEffect内部会检查localStorage中是否有用户数据，不管有没有找到，最后都会将loading状态更新为false。

但实际情况不符合预期：useEffect确实执行了（dispatch触发的Redux状态已经更新），但loading状态在初始阶段好像并未更新，页面始终显示LOADING。我没有开启Strict Mode，以便观察细节。

控制台日志显示：

1. 组件启动时打印app start，此时user为初始状态，loading为true
2. 进入useEffect打印in app effet，如果找到localStorage里的用户数据，会打印inside json conditional，执行dispatch后调用setLoading(false)
3. 但组件后续渲染时，loading依然是true，导致一直返回LOADING界面

代码示例：

// React 
import { useEffect, useState } from 'react'

// Redux
import { useSelector, useDispatch } from 'react-redux'

// React Router
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;

内容的提问来源于stack exchange，提问作者user19169534