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

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

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.

Context from the issue

gh:vercel/ai#1610: 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 nodemodules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26607:0) getRootForUpdatedFiber nodemodule

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