From fff18e42c857d68a21aab7eb547b01f50bad93b5 Mon Sep 17 00:00:00 2001
From: martincupela <martin.cupela@gmail.com>
Date: Mon, 5 Aug 2024 15:03:00 +0200
Subject: [PATCH] fix: forward StreamChat constructor options via
 useCreateChatClient

---
 docusaurus/docs/React/basics/getting-started.mdx |  6 +++++-
 src/components/Chat/hooks/useCreateChatClient.ts | 12 ++++++++----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/docusaurus/docs/React/basics/getting-started.mdx b/docusaurus/docs/React/basics/getting-started.mdx
index fa1602fa0..e3907c12e 100644
--- a/docusaurus/docs/React/basics/getting-started.mdx
+++ b/docusaurus/docs/React/basics/getting-started.mdx
@@ -144,7 +144,11 @@ 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.
+:::
 
 ## 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;
 };