React setState未触发重渲染：Keycloak初始化状态切换异常排查

我正在开发一个使用react-keycloak/web库处理认证的项目，希望根据Keycloak组件的初始化状态展示不同内容：初始化完成时显示“Original Content”，未初始化时显示“Loading”提示。
我尝试在useEffect钩子中调用setState()更新状态以触发App组件重渲染，但状态变更后组件并未重渲染更新，页面始终显示“Loading”。

我的代码： #

import { useEffect, useState } from "react";
import { useKeycloak } from "@react-keycloak/web";

function App() {
    const { keycloak, initialized } = useKeycloak();
    const [isLoading, setIsLoading] = useState(true)

    useEffect(() => {
        console.log("useEffect", initialized)
        if (initialized){
            console.log("isLoading is set to false");
            setIsLoading(false)
        }
    }, [initialized])

    return (<>{isLoading ? <>Loading</>:<>Original Content</>}</>);
}

export default App;

控制台日志： #

useEffect false
useEffect false
useEffect false
useEffect false
useEffect true
isLoading is set to false

根据代码和日志，我预期页面显示“Original Content”，但实际仍显示“Loading”，请问我忽略了什么？

解答 #

你额外维护isLoading状态属于冗余操作，而且是导致问题的核心——useKeycloak返回的initialized本身就是响应式状态，完全可以直接用来控制渲染逻辑，不需要通过useEffect同步到自定义状态中。

原代码中，即便setIsLoading(false)执行了，也可能因为React批量更新机制或状态同步的边界延迟，导致isLoading没有及时同步到最新状态，最终组件没有按预期重渲染。

最简单可靠的修改方式是直接使用initialized作为渲染判断条件：

import { useKeycloak } from "@react-keycloak/web";

function App() {
    const { initialized } = useKeycloak();

    return (<>{initialized ? <>Original Content</>:<>Loading</>}</>);
}

export default App;

这样既减少了不必要的状态维护，又能保证渲染逻辑和Keycloak的初始化状态完全同步，从根源上避免了状态不同步的问题。

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