[CLNP-5817][CLNP-5918] fix: scroll & search message issues in GroupChannelProvider (#1263)

Fixes 
- https://sendbird.atlassian.net/browse/CLNP-5917
- https://sendbird.atlassian.net/browse/CLNP-5918

### Changes 
To fix [CLNP-5917](https://sendbird.atlassian.net/browse/CLNP-5917)
introduced optimizations to prevent the "Maximum update depth exceeded"
error that occurs during message searches:

1. Added useDeepCompareEffect hook:
- Performs deep comparison of dependencies instead of reference equality
- Particularly useful for handling message array updates efficiently
- Inspired by
[kentcdodds/use-deep-compare-effect](https://github.com/kentcdodds/use-deep-compare-effect)

2. Enhanced useStore with state change detection:
- Added hasStateChanged helper to compare previous and next states
- Prevents unnecessary updates when state values haven't actually
changed
- Optimizes performance by reducing redundant renders

3. Improved storeManager with nested update prevention:
- Added protection against nested state updates
- Prevents infinite update cycles


Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If unsure, ask the members.
This is a reminder of what we look for before merging your code.

- [x] **All tests pass locally with my changes**
- [ ] **I have added tests that prove my fix is effective or that my
feature works**
- [ ] **Public components / utils / props are appropriately exported**
- [ ] I have added necessary documentation (if appropriate)


[CLNP-5917]:
https://sendbird.atlassian.net/browse/CLNP-5917?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Author: AhyoungRyu

src/hooks/useDeepCompareEffect.ts

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+
+function useDeepCompareMemoize<T>(value: T): T {
+  const ref = useRef<T>(value);
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current;
+}
+
+/**
+ * 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.
+ *
+ * Inspired by https://github.com/kentcdodds/use-deep-compare-effect
+ *
+ * @param callback Effect callback that can either return nothing (void) or return a cleanup function (() => void).
+ * @param dependencies Array of dependencies to be deeply compared
+ */
+function useDeepCompareEffect(
+  callback: () => void | (() => void),
+  dependencies: any[],
+) {
+  useEffect(callback, dependencies.map(useDeepCompareMemoize));
+}
+
+export default useDeepCompareEffect;

src/hooks/useStore.ts

@@ -1,6 +1,6 @@
-import { useContext, useRef, useCallback } from 'react';
+import { useContext, useRef, useCallback, useMemo } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { type Store } from '../utils/storeManager';
+import { type Store, hasStateChanged } from '../utils/storeManager';
 
 type StoreSelector<T, U> = (state: T) => U;
 
@@ -19,6 +19,7 @@ export function useStore<T, U>(
   if (!store) {
     throw new Error('useStore must be used within a StoreProvider');
   }
+
   // Ensure the stability of the selector function using useRef
   const selectorRef = useRef(selector);
   selectorRef.current = selector;
@@ -36,14 +37,18 @@ export function useStore<T, U>(
   );
 
   const updateState = useCallback((updates: Partial<T>) => {
-    store.setState((prevState) => ({
-      ...prevState,
-      ...updates,
-    }));
+    const currentState = store.getState();
+
+    if (hasStateChanged(currentState, updates)) {
+      store.setState((prevState) => ({
+        ...prevState,
+        ...updates,
+      }));
+    }
   }, [store]);
 
-  return {
+  return useMemo(() => ({
     state,
     updateState,
-  };
+  }), [state, updateState]);
 }

src/modules/GroupChannel/context/hooks/useMessageListScroll.tsx

@@ -1,5 +1,6 @@
 import { DependencyList, useLayoutEffect, useRef, useState } from 'react';
 import pubSubFactory from '../../../../lib/pubSub';
+import { useGroupChannel } from './useGroupChannel';
 
 /**
  * You can pass the resolve function to scrollPubSub, if you want to catch when the scroll is finished.
@@ -30,7 +31,10 @@ export function useMessageListScroll(behavior: 'smooth' | 'auto', deps: Dependen
   const scrollDistanceFromBottomRef = useRef(0);
 
   const [scrollPubSub] = useState(() => pubSubFactory<ScrollTopics, ScrollTopicUnion>({ publishSynchronous: true }));
-  const [isScrollBottomReached, setIsScrollBottomReached] = useState(true);
+  const {
+    state: { isScrollBottomReached },
+    actions: { setIsScrollBottomReached },
+  } = useGroupChannel();
 
   // SideEffect: Reset scroll state
   useLayoutEffect(() => {

src/utils/storeManager.ts

@@ -5,17 +5,36 @@ export type Store<T> = {
   subscribe: (listener: () => void) => () => void;
 };
 
+export function hasStateChanged<T>(prevState: T, updates: Partial<T>): boolean {
+  return Object.entries(updates).some(([key, value]) => {
+    return prevState[key as keyof T] !== value;
+  });
+}
+
 /**
  * A custom store creation utility
  */
 export function createStore<T extends object>(initialState: T): Store<T> {
   let state = { ...initialState };
   const listeners = new Set<() => void>();
+  let isUpdating = false;
 
   const setState = (partial: Partial<T> | ((state: T) => Partial<T>)) => {
-    const nextState = typeof partial === 'function' ? partial(state) : partial;
-    state = { ...state, ...nextState };
-    listeners.forEach((listener) => listener());
+    // Prevent nested updates
+    if (isUpdating) return;
+
+    try {
+      isUpdating = true;
+      const nextState = typeof partial === 'function' ? partial(state) : partial;
+      const hasChanged = hasStateChanged(state, nextState);
+
+      if (hasChanged) {
+        state = { ...state, ...nextState };
+        listeners.forEach((listener) => listener());
+      }
+    } finally {
+      isUpdating = false;
+    }
   };
 
   return {