Issue with group channel hook

Sendbird Chat UIKit React Native
1

[Problem/Question]

Question / remark on @sendbird/uikit-chat-hooks/channel/useGroupChannel

Hi, thanks for creating the uichat-hooks package!

I have an issue that I resolved with a patch, I don’t know if this was intended by design.
The group chat hook takes an url but the async effect is not refetched when the hook param changes.

// If problem, please fill out the below. If question, please delete.
[UIKit Version]
No using the uikit, just hook

[Reproduction Steps]
Please find attached the patch.

diff --git a/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js b/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js
index f600db6..9cbf492 100644
--- a/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js
+++ b/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js
@@ -18,7 +18,7 @@ const useGroupChannel = (sdk, channelUrl) => {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [channelUrl]);
   return {
     channel,
     loading,
diff --git a/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannel.ts b/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannel.ts
index 3f28aae..72769ac 100644
--- a/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannel.ts
+++ b/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannel.ts
@@ -15,7 +15,7 @@ export const useGroupChannel = (sdk: SendbirdChatSDK, channelUrl: string) => {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [channelUrl]);
 
   return { channel, loading, error };
 };

[Frequency]
// How frequently is this issue occurring?

[Current impact]
// How is this currently impacting your implementation?

2

spotted 2 other issue in the patch, on the GroupChannelList this time:

  • The order is never set
  • set_channel is leading to an array with duplicated channels
    diff --git a/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js b/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js
    index f600db6…51ecaa6 100644
    — a/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js
    +++ b/node_modules/@sendbird/uikit-chat-hooks/lib/commonjs/channel/useGroupChannel.js
    @@ -18,7 +18,7 @@ const useGroupChannel = (sdk, channelUrl) => {
    } finally {
    setLoading(false);
    }
  • }, );
  • }, [channelUrl]);
    return {
    channel,
    loading,
    diff --git a/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/reducer.ts b/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/reducer.ts
    index 9d86393…3d75d7b 100644
    — a/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/reducer.ts
    +++ b/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/reducer.ts
    @@ -68,7 +68,7 @@ const defaultReducer = ({ …draft }: State, action: Action) => {
    if (action.value.clearBeforeAction) {
    draft.groupChannels = getGroupChannels(action.value.channels);
    } else {
  •    draft.groupChannels = [...draft.groupChannels, ...getGroupChannels(action.value.channels)];

  •    draft.groupChannels = [...draft.groupChannels.filter(c => !action.value.channels.includes(c)), ...getGroupChannels(action.value.channels)];
 }

 compareByOrder && (draft.groupChannels = draft.groupChannels.sort(compareByOrder));

diff --git a/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts b/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts
index 63aebbc…453ac63 100644
— a/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts
+++ b/node_modules/@sendbird/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts
@@ -32,7 +32,7 @@ export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, user

const collectionRef = useRef();

  • const { loading, groupChannels, refreshing, setChannels, deleteChannels, updateRefreshing, updateLoading } =

  • const { loading, groupChannels, refreshing, setChannels, deleteChannels, updateRefreshing, updateLoading, updateOrder } =
    useGroupChannelListReducer();

    const updateChannelsAndMarkAsDelivered = (
    @@ -61,6 +61,8 @@ export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, user
    if (uid) {
    collectionRef.current = createGroupChannelListCollection(sdk, options?.collectionCreator);

  •  updateOrder(collectionRef.current.order)

  •  collectionRef.current?.setGroupChannelCollectionHandler({
   onChannelsAdded: (context, channels) => {
     updateChannelsAndMarkAsDelivered(true, context.source, channels);
3

We’re running into the same issue. Wasn’t an issue until we added some logic requiring an access token during connection, where we’re performing that in the same component as fetching the channel info.

4

Hi @Nicolas_Zilli

@sendbird/uikit-chat-hooks package is created and distributed for the dependency of UIKit for React-Native.
Therefore, we do not guarantee that this package will work in environments other than UIKit for React-Native or when it is not used in conjunction with UIKit for React-Native. If you encounter any issues, you must handle them on your own.

And in response to the three diffs you provided, here are my answers.

  1. The useGroupChannel and useOpenChannel hooks are designed to fetch the channel only once before rendering the Fragment. Therefore, there are currently no plans to change the behavior. If you need a dynamically fetching hook, I recommend creating a custom hook.
  2. The set_channels action is primarily intended for appending values from the query to the list. Therefore, it does not perform any separate filtering.
  3. The group channel collection already has a list of channels internally sorted according to the order. As a result, there is no need to handle the order explicitly.
5

Hi @Airen_Kang,

Thanks for your time. I find odd that the sources of the kit are open to public in your GitHub but you don’t expect clients to be using it. We are building a library that does exactly the same as the UI kit does but using all of our design system constraints and user data from our apis.
I guess the way to go for us would be to fork the packages we’re interested in and just keep the sendbird js sdk as a dependency or patch and distribute a vendored version of the uikit packages.

The 1) and 3) points are really blockers as it introduce wrong behaviour. 1) is breaking rule of hooks and 3) introduces duplicated channels in channel list.

6

Hi @Nicolas_Zilli

I didn’t mean to say that I didn’t expect it to be used. Rather, it means that if it is used in a way that deviates from the intended purpose, it should be handled by the user.

How exactly are you using the packages? I would be happy to update it if it helps.

Regarding point 1, it is not directly related to the rules of hooks. As you can see, it is a hook designed specifically for fetching once, so there is no resetting of the loading/error state. It is a very simple API, and since creating it would be faster than patching, so I recommended creating a custom hook. If you need more flexibility with fetching, please let me know.

For point 3, I would appreciate it if you could provide reproduction steps for the scenario where the issue occurs (e.g., duplicate channels being added to the list when receiving a new message in a group channel).

7

There is a somewhat related issue, which is that if the hook is used before the connection to the Sendbird SDK is established, it fails with an error and then does not retry when the connection state changes.