Error: Maximum update depth exceeded. When using useCompletion hook in nextjs, on long response on gpt-4o

Fix first: memoize your message component.

import { memo } from 'react';
export default memo(ChatMessage);

1. Wrap the message component in memo.
2. Re-run with the long gpt-4o response. Expected: no more 'Maximum update depth exceeded'; the UI stops hanging.

When to use: useCompletion from the AI SDK on a long gpt-4o response in streaming mode hangs the UI with 'Maximum update depth exceeded'.

When not to use: other render errors (different causes).

Compatibility: AI SDK (useCompletion), Next.js, React. Reported in vercel/ai#1610.

Variants:

• "useCompletion Maximum update depth exceeded"
• "useCompletion long response hang"
• "ai 1610"

Root cause: the hook updates completion state very fast; the unmemoized component re-renders recursively and blows the update depth.

Edge cases: this only bites on long responses, where the update pace is high enough to recurse.

Issue gh:vercel/ai#1610: the reporter asked: Issue vercel/ai#1610 (closed, 29 comments): ### Description Use useCompletion from AI SDK to call gpt-4o that will have a long response in streaming mode. It will hang the UI. Looks like its updating completion's state in a very fast pace. `` Unhandled Runtime Error Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. Call Stack throwIfInfiniteUpdateLoopDetected node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26607:0) getRootForUpdatedFiber node_module The verified answer was: The 'Maximum update depth exceeded' error with the useCompletion hook on long gpt-4o responses is fixed by memoizing your message component: import { memo } from 'react' and export memo(ChatMessage)`. Memoizing stops the render recursion that blows the update depth. Evidence thread: https://github.com/vercel/ai/issues/1610