Use useEffect instead of useDeepCompareEffect in GroupChannelListProvider (#1272)

Fixes 
- https://sendbird.atlassian.net/browse/CLNP-5966
- https://sendbird.atlassian.net/browse/CLNP-5967
- https://sendbird.atlassian.net/browse/CLNP-5969
- https://sendbird.atlassian.net/browse/CLNP-5971
- https://sendbird.atlassian.net/browse/CLNP-5973

## When to use useDeepCompareEffect vs useEffect

### useDeepCompareEffect is useful when:

1. **Handling objects without guaranteed immutability**
```typescript
const complexObject = {
  settings: {
    theme: { ... },
    preferences: { ... }
  },
  data: [ ... ]
};

useDeepCompareEffect(() => {
  // When you want to detect actual value changes
}, [complexObject]);
```


2. **Working with data from external libraries or APIs**
- When objects have new references but identical content

3. **Dealing with deeply nested objects where memoization is
impractical**
- When object structures are too complex for individual memoization

### useEffect is better when:

1. **Detecting changes in array items**

```typescript
const items = [{id: 1, value: 'a'}, {id: 2, value: 'b'}];
// Better for detecting changes within array items
useEffect(() => {
  // Detect changes in items array
}, [items]);
```


2. **Performance is critical**
- Deep comparison is computationally expensive
- Especially important for large arrays or frequently updating data

### Example of proper useDeepCompareEffect usage:
```typescript
useDeepCompareEffect(() => {
  updateState({
    ...configurations,
    ...scrollState,
    ...eventHandlers,
  });
}, [
  configurations,
  scrollState,
  eventHandlers,
]);
```

This works well here because:
- Dependencies are mostly objects
- Updates are needed only when internal structure changes
- Objects are already memoized, reducing deep comparison cost

### Key Takeaway:
- Use useDeepCompareEffect when structural equality matters
- Use useEffect for reference equality or primitive value changes
- Consider the trade-off between performance and accuracy

---------

Co-authored-by: junyoung.lim <[email protected]>

Author: AhyoungRyu

src/hooks/useDeepCompareEffect.ts

@@ -13,12 +13,24 @@ function useDeepCompareMemoize<T>(value: T): T {
 
 /**
  * Custom hook that works like useEffect but performs a deep comparison of dependencies
- * instead of reference equality. This is useful when dealing with complex objects or arrays
- * in dependencies that could trigger unnecessary re-renders.
+ * instead of reference equality.
  *
- * Inspired by https://github.com/kentcdodds/use-deep-compare-effect
+ * Best used when:
+ * - Working with complex objects without guaranteed immutability
+ * - Handling data from external sources where reference equality isn't maintained
+ * - Dealing with deeply nested objects where individual memoization is impractical
  *
- * @param callback Effect callback that can either return nothing (void) or return a cleanup function (() => void).
+ * Avoid using when:
+ * - Detecting changes within array items is crucial
+ * - Performance is critical (deep comparison is expensive)
+ * - Working primarily with primitive values or simple objects
+ *
+ * @example
+ * useDeepCompareEffect(() => {
+ *   // Effect logic
+ * }, [complexObject, anotherObject]);
+ *
+ * @param callback Effect callback that can return a cleanup function
  * @param dependencies Array of dependencies to be deeply compared
  */
 function useDeepCompareEffect(

src/modules/GroupChannelList/context/GroupChannelListProvider.tsx

@@ -203,17 +203,16 @@ export const GroupChannelListManager: React.FC<GroupChannelListProviderProps> =
     refresh,
     loadMore,
   ]);
-  const memoizedGroupChannel = useMemo(() => groupChannels, [groupChannels]);
   useDeepCompareEffect(() => {
     updateState({
-      groupChannels: memoizedGroupChannel,
       ...eventHandlers,
       ...configurations,
+      groupChannels,
     });
   }, [
     configurations,
     eventHandlers,
-    memoizedGroupChannel,
+    groupChannels.map(groupChannel => groupChannel.serialize()),
   ]);
 
   return null;

src/modules/GroupChannelList/context/__tests__/GroupChannelListProvider.spec.tsx

@@ -31,7 +31,7 @@ jest.mock('@sendbird/uikit-tools', () => ({
   useGroupChannelList: jest.fn(() => ({
     refreshing: false,
     initialized: true,
-    groupChannels: [{ url: 'test-groupchannel-url-1' }],
+    groupChannels: [{ url: 'test-groupchannel-url-1', serialize: () => JSON.stringify(this) }],
     refresh: null,
     loadMore: null,
   })),