React应用渲染顺序：为何会出现“Too many re-renders”报错？

这个报错和React的核心渲染执行逻辑直接相关，和组件调用顺序也有直接关联，核心规则和触发链路如下：

• React函数组件的执行逻辑：组件每次触发渲染（首次挂载、自身状态变更、父组件重渲染传递新Props），都会从头到尾同步执行完组件函数体内所有顶层代码，生成对应的虚拟DOM输出。
• 状态更新的触发规则：如果在组件的渲染执行阶段（也就是组件函数顶层代码运行的过程中）直接调用setState/useState返回的更新方法，React会立刻标记当前组件需要重新渲染，等本轮渲染执行完后立刻启动下一轮重渲染。

你的代码触发死循环的完整流程：

1. App组件首次挂载，初始化isLoggedIn状态为默认值false
2. 执行组件顶层代码，读取localStorage中的token，命中判断逻辑调用setLoggedIn(true)
3. React检测到渲染过程中出现了状态更新，立即将App组件加入重渲染队列
4. 新一轮重渲染启动，再次从头执行App组件所有顶层代码，再次读取到token，再次调用setLoggedIn更新状态
5. 上述流程无限重复，React检测到连续重渲染次数超过安全阈值，直接抛出Uncaught Error: Too many re-renders.错误

为什么把逻辑移到Index.js就能正常运行？
本质是你把这段逻辑放到了非渲染顶层的位置——大概率是写在了useEffect回调、事件处理函数里，而非Index组件的函数顶层。如果把同样的「顶层直接调用setState」的逻辑原封不动放到Index组件的函数顶层，一样会触发完全相同的重渲染报错。

正确实现方案 #

要实现「基于localStorage的token初始化登录态」的需求，有两种标准无副作用的写法，完全不会触发重渲染循环：

1. 把读取逻辑放到useState的惰性初始化参数中，该逻辑仅会在组件首次挂载时执行一次，后续重渲染不会重复运行：

function App() {
  // 惰性初始化：仅首次挂载时读取localStorage生成初始状态
  const [isLoggedIn, setLoggedIn] = useState(() => {
    return Boolean(localStorage.getItem('token'));
  });

  return <Index isLoggedIn={isLoggedIn} setLoggedIn={setLoggedIn} />;
}

2. 如果需要在组件挂载后、或者存储值变化时同步校验状态，把更新逻辑放到useEffect副作用钩子中，副作用会在当前轮渲染完成、DOM提交后才执行，不会打断渲染流程触发循环：

function App() {
  const [isLoggedIn, setLoggedIn] = useState(false);

  // 渲染完成后执行校验，不会触发渲染中更新
  useEffect(() => {
    const storageToken = localStorage.getItem('token');
    setLoggedIn(Boolean(storageToken));
  }, []);

  return <Index isLoggedIn={isLoggedIn} setLoggedIn={setLoggedIn} />;
}

核心开发规则 #

禁止在函数组件的顶层渲染路径上直接调用状态更新方法，所有状态更新操作，要么放在用户事件回调（比如点击、输入事件处理函数）中，要么放在useEffect/useLayoutEffect这类专门的副作用钩子中，否则必然会触发重渲染死循环。

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