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 node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js (26607:0) getRootForUpdatedFiber node_module