fix: use useSyncExternalStore in the useStateStore hook (#3084)

Author: khushal87

package/src/hooks/useStateStore.ts

@@ -1,6 +1,9 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 
 import type { StateStore } from 'stream-chat';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+const noop = () => {};
 
 export function useStateStore<
   T extends Record<string, unknown>,
@@ -14,22 +17,48 @@ export function useStateStore<
   T extends Record<string, unknown>,
   O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
 >(store: StateStore<T> | undefined, selector: (v: T) => O) {
-  const [state, setState] = useState<O | undefined>(() => {
-    if (!store) {
-      return undefined;
-    }
-    return selector(store.getLatestValue());
-  });
+  const wrappedSubscription = useCallback(
+    (onStoreChange: () => void) => {
+      const unsubscribe = store?.subscribeWithSelector(selector, onStoreChange);
+      return unsubscribe ?? noop;
+    },
+    [store, selector],
+  );
+
+  const wrappedSnapshot = useMemo(() => {
+    let cachedTuple: [T, O];
+
+    return () => {
+      const currentValue = store?.getLatestValue();
+
+      if (!currentValue) return undefined;
 
-  useEffect(() => {
-    if (!store) {
-      return;
-    }
+      // store value hasn't changed, no need to compare individual values
+      if (cachedTuple && cachedTuple[0] === currentValue) {
+        return cachedTuple[1];
+      }
 
-    const unsubscribe = store.subscribeWithSelector(selector, setState);
+      const newlySelected = selector(currentValue);
 
-    return unsubscribe;
+      // store value changed but selected values wouldn't have to, double-check selected
+      if (cachedTuple) {
+        let selectededAreEqualToCached = true;
+
+        for (const key in cachedTuple[1]) {
+          if (cachedTuple[1][key] === newlySelected[key]) continue;
+          selectededAreEqualToCached = false;
+          break;
+        }
+
+        if (selectededAreEqualToCached) return cachedTuple[1];
+      }
+
+      cachedTuple = [currentValue, newlySelected];
+      return cachedTuple[1];
+    };
   }, [store, selector]);
 
+  const state = useSyncExternalStore(wrappedSubscription, wrappedSnapshot);
+
   return state;
 }