React跨组件获取state触发Too many re-renders报错如何解决

• 当前的执行链路完全没有中断点：Test组件在渲染过程中会同步调用FetchUserItems函数，而该函数内部没有设置任何执行判断、边界限制，只要被触发就会立刻执行setUserFirstName、setUserItem更新状态
• 状态更新会直接触发Test组件的下一轮重渲染，重渲染流程中又会再次同步调用FetchUserItems、再次触发状态更新，最终形成「渲染→setState→重渲染」的无限闭环，这正是React抛出"Too many re-renders"、拦截循环渲染的原因

跨组件复用带状态的逻辑，React官方推荐的路径是自定义Hook，之前实现的核心问题是把带状态的逻辑当成普通工具函数，在组件渲染的同步阶段直接执行，违背了Hook的执行边界规则。正确的改造要点：

• 函数命名符合Hook规范：以use开头，让React的规则检测能正确识别为Hook，而不是普通工具函数
• 状态声明内聚在Hook内部：将userFirstName、userItem的useState逻辑和对应的更新逻辑放在一起，保证逻辑闭环
• 严格划分执行边界：不要在Hook的同步执行体（也就是和useState同层级的、每次渲染都会跑的代码）里直接调用setState；如果是初始加载、数据拉取类的更新逻辑，放到useEffect回调中，配合依赖数组控制执行时机，避免每次渲染都触发更新
• 调用方式保持Hook的使用惯例：在业务组件中直接调用Hook，解构返回的状态值用于渲染即可

参考代码 #

共享逻辑文件 FetchCompo.js #

import { useState, useEffect } from 'react'
// 改造为合规的自定义Hook
export function useFetchUserItems(userId) {
  const [userFirstName, setUserFirstName] = useState('')
  const [userItem, setUserItem] = useState(null)

  // 状态更新逻辑放入副作用，由依赖数组控制执行频率
  useEffect(() => {
    async function loadUserData() {
      const res = await fetch(`/api/user/${userId}`)
      const userInfo = await res.json()
      setUserFirstName(userInfo.firstName)
      setUserItem(userInfo.relatedItem)
    }
    loadUserData()
  }, [userId])

  return { userFirstName, userItem }
}

业务组件 Test.js #

import { useFetchUserItems } from './FetchCompo'

export default function Test({ userId }) {
  const { userFirstName, userItem } = useFetchUserItems(userId)

  return (
    <div>
      <p>用户姓名：{userFirstName}</p>
      <p>关联项目：{userItem?.name}</p>
    </div>
  )
}

• 如果多个组件需要共享同一份状态实例（而非每个调用Hook的组件各自生成独立的状态副本），可以将Hook中的状态提升到共同父层的Context中，通过Provider透传给下游组件，避免多组件状态不一致的问题
• 如果是响应用户交互（按钮点击、表单提交等）触发的状态更新，需要将setState调用绑定到对应的事件回调中，不要在渲染同步阶段直接执行

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