为什么React的useEffect设置空依赖数组仍会在每次重渲染时执行

你的自动校验逻辑直接写在了Home组件的空依赖useEffect中，该钩子的触发时机是Home组件每次挂载完成后，并非仅站点首次加载（刷新/初次进入站点）时执行。当你登录/注册成功调用history.push("/")跳回首页时，Home组件会重新挂载，自然就会重复执行localStorage读取、自动发登录请求的逻辑，属于React生命周期和路由跳转的正常表现，不是低级错误。
额外提一个冗余问题：你已经在Signin页完成了登录请求、将用户信息存入了全局Context，跳回首页后再发一次重复的登录请求完全没有必要，还会增加不必要的接口开销。

• 第一步：将自动登录校验逻辑迁移到站点根组件（如App.jsx）的空依赖useEffect中，根组件在站点整个运行生命周期内只会挂载一次，仅页面刷新/初次加载时才会执行一次校验，路由跳转不会触发，刚好符合你“仅初始渲染阶段读取localStorage”的需求。
• 第二步：给全局Context增加isAuthenticated登录状态标识，默认值为false，自动登录成功、手动登录/注册成功时都将该字段设为true。Home组件不需要再读取localStorage、发登录请求，仅判断全局的登录状态即可，示例改造代码如下：

const Home = () => {
  const { state: { isAuthenticated }, dispatch } = useGlobalAppContext();
  const history = useHistory();

  useEffect(() => {
    if (!isAuthenticated) {
      history.push("/register");
    }
  }, [isAuthenticated, history]);

  return (
    <HomeWrapper>
      <Prompt />
      <TaskPopup />
      <SearchPanel />
      <Sidebar />
      <TaskPanel />
      <ChatPanel />
    </HomeWrapper>
  );
};

• 额外安全优化：不要明文将用户密码存储在localStorage中，风险极高。常规的登录流程是后端返回登录令牌（token），你仅需要存储token，下次自动校验时携带token请求用户信息即可，避免密码泄露。

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