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