From 310835dc17e1228cd76d825a1dadb0f681ea552b Mon Sep 17 00:00:00 2001
From: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:15:02 +0200
Subject: [PATCH] fix: forward StreamChat constructor options via
 useCreateChatClient (#2463)

---
 .../docs/React/basics/getting-started.mdx     | 35 ++++++++++++++++++-
 .../Chat/hooks/useCreateChatClient.ts         | 12 ++++---
 2 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx
index fa1602fa0..53d46e935 100644
--- a/docusaurus/docs/React/basics/getting-started.mdx
+++ b/docusaurus/docs/React/basics/getting-started.mdx
@@ -144,7 +144,40 @@ body,
 
 ## Chat Client & Connecting User
 
-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 of the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
+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.
+
+```
+import {
+  Chat,
+  StreamChatOptions,
+  useCreateChatClient,
+} from 'stream-chat-react';
+
+const streamChatOptions: StreamChatOptions = {
+  timeout: 6000
+}
+
+const App = () => {
+  const client = useCreateChatClient({
+    apiKey,
+    options: streamChatOptions,
+    tokenOrProvider: token,
+    userData: { id: userId },
+  });
+
+  if (!client) return <div>Loading...</div>;
+
+  return (
+    <Chat client={client}>
+    </Chat>
+  );
+}
+```
+
+:::
 
 ## Creating a Channel
 
diff --git a/src/components/Chat/hooks/useCreateChatClient.ts b/src/components/Chat/hooks/useCreateChatClient.ts
index 1ee297088..d2a64baf1 100644
--- a/src/components/Chat/hooks/useCreateChatClient.ts
+++ b/src/components/Chat/hooks/useCreateChatClient.ts
@@ -1,10 +1,12 @@
 import { useEffect, useState } from 'react';
 
-import {
+import { StreamChat } from 'stream-chat';
+
+import type {
   DefaultGenerics,
   ExtendableGenerics,
   OwnUserResponse,
-  StreamChat,
+  StreamChatOptions,
   TokenOrProvider,
   UserResponse,
 } from 'stream-chat';
@@ -14,12 +16,14 @@ import {
  */
 export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGenerics>({
   apiKey,
+  options,
   tokenOrProvider,
   userData,
 }: {
   apiKey: string;
   tokenOrProvider: TokenOrProvider;
   userData: OwnUserResponse<SCG> | UserResponse<SCG>;
+  options?: StreamChatOptions;
 }) => {
   const [chatClient, setChatClient] = useState<StreamChat<SCG> | null>(null);
   const [cachedUserData, setCachedUserData] = useState(userData);
@@ -29,7 +33,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
   }
 
   useEffect(() => {
-    const client = new StreamChat<SCG>(apiKey);
+    const client = new StreamChat<SCG>(apiKey, undefined, options);
     let didUserConnectInterrupt = false;
 
     const connectionPromise = client.connectUser(cachedUserData, tokenOrProvider).then(() => {
@@ -45,7 +49,7 @@ export const useCreateChatClient = <SCG extends ExtendableGenerics = DefaultGene
           console.log(`Connection for user "${cachedUserData.id}" has been closed`);
         });
     };
-  }, [apiKey, cachedUserData, tokenOrProvider]);
+  }, [apiKey, cachedUserData, options, tokenOrProvider]);
 
   return chatClient;
 };