useChat: Infinite re-renders when using messages as useEffect dependency

[sebaFP]

Description

Bug Description

When using the messages array from useChat as a dependency in useEffect, it causes infinite re-renders and throws a "Maximum update depth exceeded" error.

Steps to Reproduce

1. Use the useChat hook to get messages
2. Add messages as a dependency in a useEffect

const { messages } = useChat();
useEffect(() => {
  // Any logic here
}, [messages]); // Adding messages as dependency

Current Behavior

• Component enters an infinite re-render loop
• Console shows error: "Maximum update depth exceeded"
• Full error: "Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."

Expected Behavior

• useEffect should only run when messages actually change from user interactions
• No infinite re-render loop should occur

Environment

• vercel/ai version: 4.1.24
• React version: 19

Additional Context

This seems to happen because messages reference might be changing on every render, causing the effect to run repeatedly.

Code example

No response

AI provider

No response

Additional context

No response

[lgrammel]

@sebaFP did you encounter this issue as part of an ai sdk upgrade or independently?

[Godrules500]

@lgrammel I just updated and ran into the issue after I updated the ai-sdk and vertex ai sdk. I re-installed my previous version (ai sdk: 4.1.16) and it started working again.

The error seems to be happening after the final message is finished. It'll print out the whole long message I'm playing with, and then at the very end it throws that maximum depth error listed above

[lgrammel]

@Godrules500 from which version did you update?

[Godrules500]

@Godrules500 from which version did you update?

@lgrammel I updated to the latest version which is 4.1.34 when it started breaking. So I went from 4.1.16 to 4.1.34
and google-vertex went from 2.1.8 to 2.1.12

[lgrammel]

I have tried to reproduce this on the latest version of the AI SDK by adding:

  useEffect(() => {
    // Any logic here
    console.log('Messages', messages);
  }, [messages]); // Adding messages as dependency

to https://github.com/vercel/ai/blob/main/examples/next-openai/app/page.tsx

The example works without problems.

Are there other AI SDK packages that you have imported (e.g. @ai-sdk/ui-utils)? What are you doing in the useEffect loop? Are you using tools?