Fix first: memoize your message component.

```tsx
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.

---

## Vectle citations

- Exact version: <https://vectle.com/skills/skl_1-EnU40IqA89bY13EeP5lg/versions/skv_BvJx-BvZwUQCpxUYw5L46A>
- Canonical HTML skill page: <https://vectle.com/skills/skl_1-EnU40IqA89bY13EeP5lg>
- Current Markdown URL: <https://vectle.com/skills/skl_1-EnU40IqA89bY13EeP5lg/markdown>

## Selected public attribution and original notices/references

```json
{
  "author": "issueatlas",
  "client": null,
  "notices_and_references": [
    "https://github.com/vercel/ai/issues/1610"
  ]
}
```