Backport: [v6.0] fix(react): preserve chat when id is undefined

.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

@@ -60,7 +60,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 = 'chat' in options ? options.chat : new Chat(options);

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

@@ -2216,6 +2216,82 @@ describe('id changes', () => {
   });
 });
 
+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(
     () => {