React中useEffect更新认证用户导航栏触发“Maximum update depth exceeded”错误

你代码里的两个关键问题导致了无限循环更新：

1. useEffect的代码块没有正确闭合，组件的return语句被错误地放到了useEffect内部，导致每次组件渲染都会重复执行状态更新逻辑
2. 你没有给useEffect添加空依赖数组（虽然注释提到了，但实际代码里并未实现）

修复后的完整代码 #

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

const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  useEffect(() => {
    const checkAuthenticationStatus = () => {
      const user = localStorage.getItem("user");
      const userIsLoggedIn = user !== null;
      setIsAuthenticated(userIsLoggedIn);
    };

    checkAuthenticationStatus();
  }, []); // 空依赖数组确保effect仅在组件挂载时执行一次

  return (
    <div>
      {/* 导航栏显示逻辑示例 */}
      {isAuthenticated ? (
        <img src="/user-avatar.png" alt="用户头像" />
      ) : (
        <>
          <button>登录</button>
          <button>注册</button>
        </>
      )}
    </div>
  );
};

export default App;

核心修复点说明 #

• 修正useEffect的代码块闭合，让return语句回到组件顶层作用域，避免每次渲染都重复触发状态更新
• 添加[]空依赖数组，限制认证状态检查逻辑仅在组件首次挂载时执行一次，彻底终止循环更新

更简洁的优化方案 #

你还可以直接在useState初始化时读取localStorage的值，完全不需要依赖useEffect，代码更简洁且避免异步更新问题：

import React, { useState } from 'react';

const App = () => {
  // 初始化时直接从localStorage读取认证状态
  const [isAuthenticated, setIsAuthenticated] = useState(() => {
    const user = localStorage.getItem("user");
    return user !== null;
  });

  return (
    <div>
      {/* 导航栏显示逻辑 */}
      {isAuthenticated ? (
        <img src="/user-avatar.png" alt="用户头像" />
      ) : (
        <>
          <button>登录</button>
          <button>注册</button>
        </>
      )}
    </div>
  );
};

export default App;

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