# useCreateChatClient

Creates a Chat client and automatically connects/disconnects a user.

## Best Practices

- Pass stable `apiKey`, `userData`, and `tokenOrProvider` values to avoid reconnect loops.
- Use a token provider for production to handle token refresh securely.
- Treat the returned client as nullable during initial render and handle loading states.
- Disconnect the user on logout by unmounting or changing the hook inputs.
- Keep `options` consistent to avoid recreating the client unexpectedly.

## Usage

```tsx title="useCreateChatClient.ts"
import {
  Chat,
  OverlayProvider,
  useCreateChatClient,
} from "stream-chat-react-native";
import { ActivityIndicator, View } from "react-native";

const App = () => {
  const chatClient = useCreateChatClient({
    apiKey: "YOUR_API_KEY",
    userData: {
      id: "YOUR_USER_ID",
      name: "YOUR_USER_NAME",
    },
    tokenOrProvider: "YOUR_TOKEN_OR_PROVIDER",
  });

  if (!chatClient) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <OverlayProvider>
      <Chat client={chatClient}>{/** Your app components */}</Chat>
    </OverlayProvider>
  );
};
```

<admonition type="warning">

The hook returns `null` while the client is being created and the user is being connected. Make sure to handle this loading state in your component to prevent rendering errors. Never pass `null` to the `Chat` component's `client` prop.

</admonition>

## Parameters

| Name            | Type                                | Required | Description                                    |
| --------------- | ----------------------------------- | -------- | ---------------------------------------------- |
| apiKey          | `string`                            | Yes      | The API key for the Stream Chat API.           |
| userData        | `OwnUserResponse` \| `UserResponse` | Yes      | The user data for the user to connect.         |
| tokenOrProvider | `TokenOrProvider`                   | Yes      | The token or provider for the user to connect. |
| options         | `StreamChatOptions`                 | No       | The options for the Chat client.               |

## Returns

| Type                   | Description                                                           |
| ---------------------- | --------------------------------------------------------------------- |
| `StreamChat` \| `null` | The Chat client instance, or `null` if the client is still connecting |


---

This page was last updated at 2026-05-13T13:38:50.478Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/hooks/chat/use-create-chat-client/](https://getstream.io/chat/docs/sdk/react-native/hooks/chat/use-create-chat-client/).