React error "Maximum update depth exceeded"

Issue

I am using the AI SDK in a React project with the useChat or useCompletion hooks and I get the following error when AI responses stream in: Maximum update depth exceeded.

Background

By default, the UI is re-rendered on every chunk that arrives. This can overload the rendering, especially on slower devices or when complex components need updating (e.g. Markdown). Throttling can mitigate this.

Solution

Use the throttle option to throttle the UI updates:

useChat

const { messages } = useChat({
  // Throttle the messages and data updates to 50ms:
  throttle: 50,
});

useCompletion

const { completion } = useCompletion({
  // Throttle the completion and data updates to 50ms:
  throttle: 50,
});