Zustand/React页面刷新时登录按钮闪烁问题求助

问题根源 #

页面刷新时，Zustand的persist中间件需要从本地存储异步读取持久化数据，而你的Store初始isLogged设为false，导致组件先渲染LoginBtn，等本地存储数据加载完成、状态更新后才切换到UserPic，从而产生闪烁。

解决方案 #

通过跟踪持久化数据的重 hydration 状态，在数据未加载完成前不渲染切换组件，或显示占位/加载状态，等状态稳定后再渲染正确内容。

方法1：在Store中管理重 hydration 状态

修改你的Auth Store，添加状态跟踪重 hydration 是否完成：

import { create } from "zustand";
import { persist, PersistOptions } from "zustand/middleware";

type AuthStore = {
  isLogged: boolean | undefined; // 初始设为undefined，区分未加载和未登录状态
  login: () => void;
  logout: () => void;
  isRehydrated: boolean; // 标记是否完成重 hydration
};

export const useAuthStore = create<AuthStore>()(
  persist(
    (set) => ({
      isLogged: undefined,
      isRehydrated: false,
      login: () => set({ isLogged: true }),
      logout: () => set({ isLogged: false }),
    }),
    {
      name: "authStore",
      // 重 hydration 完成后更新状态
      onRehydrateStorage: () => (state) => {
        state.isRehydrated = true;
      },
      // 处理本地存储读取逻辑，确保初始值正确
      storage: {
        getItem: (name) => {
          const value = localStorage.getItem(name);
          return value ? JSON.parse(value) : { isLogged: false };
        },
        setItem: (name, value) => localStorage.setItem(name, JSON.stringify(value)),
        removeItem: (name) => localStorage.removeItem(name),
      },
    } as PersistOptions<AuthStore>
  )
);

然后在组件中判断状态：

const { isLogged, isRehydrated } = useAuthStore(state => ({
  isLogged: state.isLogged,
  isRehydrated: state.isRehydrated
}));

// 未完成重 hydration 时，显示加载态或占位元素
if (!isRehydrated) {
  return <div className="auth-loading"></div>; // 可以是空白、加载动画等
}

// 状态稳定后渲染正确组件
return (
  <>
    {isLogged ? <UserPic /> : <LoginBtn />}
  </>
);

方法2：利用Zustand persist内置的重 hydration 状态

persist中间件会自动给Store添加_rehydrated属性，可直接使用：

const isLogged = useAuthStore(state => state.isLogged);
const isRehydrated = useAuthStore(state => state._rehydrated);

if (!isRehydrated) {
  return <div>加载中...</div>;
}

return (
  <>
    {isLogged ? <UserPic /> : <LoginBtn />}
  </>
);

注意：_rehydrated是内部属性，使用TypeScript时需手动声明类型以保证类型安全。

方法3：根组件等待重 hydration 完成

在应用根组件中等待整个Store的重 hydration 完成后再渲染页面，避免局部组件闪烁：

import { useState, useEffect } from "react";
import { useAuthStore } from "./authStore";

function App() {
  const [isAppReady, setIsAppReady] = useState(false);
  const isRehydrated = useAuthStore(state => state._rehydrated);

  useEffect(() => {
    if (isRehydrated) {
      setIsAppReady(true);
    }
  }, [isRehydrated]);

  if (!isAppReady) {
    return <div className="app-loading"></div>;
  }

  return (
    // 你的应用内容
  );
}

核心思路 #

通过等待持久化数据加载完成（重 hydration 完成），确保组件渲染时使用的是最终的持久化状态，而非初始默认值，从而消除状态切换导致的闪烁。

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