fix: do not rerender on client options update (#2465)

🚂 #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.

Author: myandrienko

docusaurus/docs/React/basics/getting-started.mdx

@@ -174,34 +174,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>;
+};
 ```
 
 :::

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;
 };