Right way to connect to chat

Chat.js

// If you are running into following error, then please use this gist as an example for implementing chat in react or RN
// "Watch or Presence requires an active websocket connection, please make sure to include your websocket connection_id"

// This error occurs if you make api call which requires active websocket connection (established by `client.connectUser`),
// without waiting for client.connectUser call to finish.

import React, { useEffect, useState } from 'react';
import { StreamChat } from 'stream-chat';
import {
  Chat,
  Channel,
  ChannelHeader,
  ChannelList,
  MessageInput,
  MessageInputFlat,
  MessageList,
  Thread,
  Window,
} from 'stream-chat-react';
import 'stream-chat-react/dist/css/index.css';

const filters = { type: 'messaging', example: 1 };
const options = { state: true, watch: true, presence: true };
const sort = {
  cid: 1,
  last_message_at: -1,
  updated_at: -1,
};

const App = () => {
  const [chatClient, setChatClient] = useState();

  useEffect(() => {
    let _chatClient;

    const setUpClient = async () => {
      _chatClient = new StreamChat('api_key');
      // Wait for connectUser to finish, before rendering components
      await _chatClient.connectUser({ id: 'user_id' }, 'userToken');

      setChatClient(_chatClient);
    }

    setUpClient();

    return () => {
      _chatClient && _chatClient.disconnect();
    }
  }, [])

  // Or you can show some loading indicator, until we are connecting to chat
  if (!chatClient) return null;

  return (
    <Chat client={chatClient}>
      <ChannelList
        filters={filters}
        sort={sort}
        options={options}
      />
      <Channel>
        <Window>
          <ChannelHeader />
          <MessageList />
          <MessageInput Input={MessageInputFlat} focus />
        </Window>
        <Thread />
      </Channel>
    </Chat>
  )
};

export default App;