From 81f33bae3933c7637e3a2a93b9c53be0511b45f6 Mon Sep 17 00:00:00 2001
From: Matvei Andrienko <m.y.andrienko@outlook.com>
Date: Tue, 6 Aug 2024 17:33:00 +0200
Subject: [PATCH] fix: do not rerender on client options update (#2465)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🚂 https://github.com/GetStream/stream-chat-react/pull/2463

It might be better not to recreate the client every time options update,
since `useCreateChatClient({ options: { /* some inline options */ } })`
will probably be a popular way to use this hook.
---
 .../docs/React/basics/getting-started.mdx     | 30 ++++++++-----------
 .../Chat/hooks/useCreateChatClient.ts         |  6 ++--
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx
index 53d46e935..d8662c5d3 100644
--- a/docusaurus/docs/React/basics/getting-started.mdx
+++ b/docusaurus/docs/React/basics/getting-started.mdx
@@ -147,34 +147,28 @@ body,
 To communicate with the Stream Chat API the SDK requires a client with an established connection. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
 
 :::important
-The hook `useCreateChatClient` accepts parameter `options`. This is an object forwarded to the `StreamChat` constructor. Please make sure the `options` object is created outside the scope of the component invoking `useCreateChatClient` to prevent unnecessary re-renders and thus reconnects.
+The hook `useCreateChatClient` accepts parameter `options`. This is an object forwarded to the `StreamChat` constructor. When the client is created, the first passed `options` value is used, and the client is **not** recreated when the `options` value updates. In most cases it's not a problem, however if you really need to recreate the client with the latest options and reconnect, you can set a `key` on the component that invokes `useCreateChatClient`:
 
-```
-import {
-  Chat,
-  StreamChatOptions,
-  useCreateChatClient,
-} from 'stream-chat-react';
-
-const streamChatOptions: StreamChatOptions = {
-  timeout: 6000
-}
+```ts
+import { Chat, StreamChatOptions, useCreateChatClient } from 'stream-chat-react';
 
 const App = () => {
+  const [timeout, setTimeout] = useState(6000);
+  const key = `timeout_${timeout}`;
+  return <ChatWithOptions key={key} timeout={timeout} />;
+};
+
+const ChatWithOptions = ({ timeout }: StreamChatOptions) => {
   const client = useCreateChatClient({
     apiKey,
-    options: streamChatOptions,
+    options: { timeout },
     tokenOrProvider: token,
     userData: { id: userId },
   });
 
   if (!client) return <div>Loading...</div>;
-
-  return (
-    <Chat client={client}>
-    </Chat>
-  );
-}
+  return <Chat client={client}></Chat>;
+};
 ```
 
 :::
diff --git a/src/components/Chat/hooks/useCreateChatClient.ts b/src/components/Chat/hooks/useCreateChatClient.ts
index d2a64baf1..f98af175a 100644
--- a/src/components/Chat/hooks/useCreateChatClient.ts
+++ b/src/components/Chat/hooks/useCreateChatClient.ts
@@ -32,8 +32,10 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
     setCachedUserData(userData);
   }
 
+  const [cachedOptions] = useState(options);
+
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey, undefined, options);
+    const client = new StreamChat<SCG>(apiKey, undefined, cachedOptions);
     let didUserConnectInterrupt = false;
 
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -49,7 +51,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
           console.log(`Connection for user "${cachedUserData.id}" has been closed`);
         });
     };
-  }, [apiKey, cachedUserData, options, tokenOrProvider]);
+  }, [apiKey, cachedUserData, cachedOptions, tokenOrProvider]);
 
   return chatClient;
 };