React/Next.js中useEffect触发更新深度超限错误的排查与修复

错误：超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用setState时可能发生这种情况。React限制嵌套更新的数量以防止无限循环

错误成因 #

1. 平滑滚动触发循环更新：你使用scrollIntoView({ behavior: 'smooth' })实现平滑滚动，这个操作会触发浏览器多次布局重排。如果ChatMessage组件内部有监听滚动/布局变化的逻辑，或状态更新会触发父组件重渲染，就会导致依赖messages.length的useEffect反复执行，进而重复调用滚动方法，形成循环。
2. 状态变化引发重复触发：初始时fakeLoading的状态依赖messages.length，1秒后将其设为false会触发组件重渲染。此时messages.length未发生变化，但重渲染会再次触发依赖该值的滚动useEffect，叠加平滑滚动的持续触发，最终导致无限更新。

修复方案 #

方案1：优化滚动触发条件（推荐） #

给滚动操作添加判断，仅当滚动容器未处于底部时执行，同时调整依赖项确保状态变化后能正确触发滚动：

const scrollRef = useRef<ElementRef<'div'>>(null)
const [fakeLoading, setFakeLoading] = useState(messages.length === 0 ? true : false)
const scrollContainerRef = useRef<ElementRef<'div'>>(null) // 新增滚动容器的ref

useEffect(() => {
  const timeout = setTimeout(() => {
    setFakeLoading(false)
  }, 1000)

  return () => {
    clearTimeout(timeout)
  }
}, [])

useEffect(() => {
  const container = scrollContainerRef.current
  const target = scrollRef.current
  if (!container || !target) return

  // 判断是否已处于底部（10为容差值，避免因微小偏差重复滚动）
  const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 10
  if (!isAtBottom) {
    target.scrollIntoView({ behavior: 'smooth', block: 'end' })
  }
}, [JSON.stringify(messages), fakeLoading]) // 加入fakeLoading确保状态变化后触发滚动

return (
  <div ref={scrollContainerRef} className="flex-1 overflow-y-auto pr-4">
    <ChatMessage 
      role="system"
      isLoading={fakeLoading}
      content={`Hello, I'm ${companion.name}, ${companion.description}`}
      src={companion.src}
    />
    {messages.map((message, key) => (
      <ChatMessage 
        key={key}
        content={message.content}
        role={message.role}
        src={companion.src}
      />
    ))}
    {isLoading && (
      <ChatMessage
        role="system"
        isLoading
        src={companion.src}
      />
    )}
    <div ref={scrollRef} />
  </div>
)

方案2：延迟执行滚动，避开重渲染周期 #

如果不需要严格实时滚动，用setTimeout延迟执行滚动操作，避免在组件重渲染的同步周期内触发：

useEffect(() => {
  const timeout = setTimeout(() => {
    scrollRef?.current?.scrollIntoView({ behavior: 'smooth', block: 'end' })
  }, 100) // 延迟100ms执行，避开重渲染同步阶段

  return () => clearTimeout(timeout)
}, [messages.length, fakeLoading])

方案3：移除平滑滚动（快速临时解决） #

如果平滑滚动不是必须项，直接去掉behavior: 'smooth'改用即时滚动，避免多次布局触发：

scrollRef?.current?.scrollIntoView({ block: 'end' })

内容的提问来源于stack exchange，提问作者A-Makeyev