fix(react): preserve chat when id is undefined (#16484)

## Background

Passing `id: undefined` to `useChat` currently recreates the internal
`Chat` instance on every render because the `id` key exists in options
while the auto-generated chat ID never equals `undefined`. That clears
messages and stream state immediately after updates, which makes the
common `id={conversationId ?? undefined}` pattern behave differently
from omitting `id`.

I confirmed the reproduction from #16226 with a focused regression test:
with the old guard, calling `setMessages` while `id` is explicitly
`undefined` immediately rerenders into a fresh chat with a new generated
ID and `messages: []`.

I compared the two open PRs before choosing this implementation:

- #16228 by @Aayush-engineer uses the nullish guard and adds a
changeset, but does not include a regression test.
- #16403 by @zhsj0089944 uses an `undefined` guard, but does not include
a regression test or changeset.

This PR uses the nullish guard from #16228 because it makes explicit
`undefined` behave like an omitted ID and also treats a JavaScript
`null` value defensively as “no provided ID”. It adds the missing
hook-level regression test and a patch changeset.

Credit to @Aayush-engineer and @zhsj0089944 for the prior PRs and
diagnosis.

## Summary

- Only recreate the internal `Chat` from `useChat` when a provided `id`
is non-nullish and different from the current chat ID.
- Add a regression test that verifies `useChat({ id: undefined })`
preserves the generated ID and messages across rerenders.
- Add a patch changeset for `@ai-sdk/react`.

## Manual Verification

Confirmed the reproduction by temporarily restoring the old guard and
running:

```sh
pnpm --filter @ai-sdk/react exec vitest --config vitest.config.js --run src/use-chat.ui.test.tsx -t "should not recreate chat when id is explicitly undefined"
```

With the old guard, the test failed because messages reset to `[]` and
the generated chat ID changed. With this fix, the same test passes.

## Checklist

- [x] All commits are signed (PRs with unsigned commits cannot be
merged)
- [x] Tests have been added / updated (for bug fixes / features)
- [ ] Documentation has been added / updated (for bug fixes / features)
- [x] A _patch_ changeset for relevant packages has been added (for bug
fixes / features - run `pnpm changeset` in the project root)
- [x] I have reviewed this pull request (self-review)

## Related Issues

Fixes #16226.
Supersedes and closes #16228.
Supersedes and closes #16403.

Author: gr2m

.changeset/use-chat-nullish-id.md

@@ -0,0 +1,5 @@
+---
+"@ai-sdk/react": patch
+---
+
+Treat nullish `useChat` IDs the same as omitted IDs so the chat instance is not recreated on every render.

packages/react/src/use-chat.ts

@@ -96,7 +96,9 @@ export function useChat<UI_MESSAGE extends UIMessage = UIMessage>({
 
   const shouldRecreateChat =
     ('chat' in options && options.chat !== chatRef.current) ||
-    ('id' in options && chatRef.current.id !== options.id);
+    ('id' in options &&
+      options.id != null &&
+      chatRef.current.id !== options.id);
 
   if (shouldRecreateChat) {
     chatRef.current =

packages/react/src/use-chat.ui.test.tsx

@@ -2424,6 +2424,84 @@ describe('use-chat', () => {
     });
   });
 
+  describe('undefined id', () => {
+    setupTestComponent(
+      () => {
+        const [renderCount, setRenderCount] = React.useState(0);
+        const {
+          messages,
+          setMessages,
+          id: idKey,
+        } = useChat({
+          id: undefined,
+          generateId: mockId(),
+        });
+
+        return (
+          <div>
+            <div data-testid="id">{idKey}</div>
+            <div data-testid="render-count">{renderCount}</div>
+            <div data-testid="messages">
+              {JSON.stringify(messages, null, 2)}
+            </div>
+            <button
+              data-testid="set-message"
+              onClick={() => {
+                setMessages([
+                  {
+                    id: 'message-0',
+                    role: 'user',
+                    parts: [{ text: 'hi', type: 'text' }],
+                  },
+                ]);
+              }}
+            />
+            <button
+              data-testid="rerender"
+              onClick={() => {
+                setRenderCount(count => count + 1);
+              }}
+            />
+          </div>
+        );
+      },
+      {
+        init: TestComponent => <TestComponent />,
+      },
+    );
+
+    it('should not recreate chat when id is explicitly undefined', async () => {
+      const initialId = screen.getByTestId('id').textContent;
+
+      await userEvent.click(screen.getByTestId('set-message'));
+
+      await waitFor(() => {
+        expect(
+          JSON.parse(screen.getByTestId('messages').textContent ?? ''),
+        ).toStrictEqual([
+          {
+            id: 'message-0',
+            role: 'user',
+            parts: [{ text: 'hi', type: 'text' }],
+          },
+        ]);
+      });
+
+      await userEvent.click(screen.getByTestId('rerender'));
+
+      expect(screen.getByTestId('id').textContent).toBe(initialId);
+      expect(
+        JSON.parse(screen.getByTestId('messages').textContent ?? ''),
+      ).toStrictEqual([
+        {
+          id: 'message-0',
+          role: 'user',
+          parts: [{ text: 'hi', type: 'text' }],
+        },
+      ]);
+    });
+  });
+
   describe('chat instance changes', () => {
     setupTestComponent(
       () => {