fix: change useStateStore to use useSyncExternalStore (#2573)

### 🎯 Goal

Changing stores on the fly would keep previously calculated state for a
bit before the effect would run to recalculate it - using
`useSyncExternalStore` (thank you, @myandrienko) should alleviate this
issue. Both `subscribe` and `getSnapshot` functions required by the
React hook are wrapped to allow for selector functionality,
[`geSnapshot` requires the output to be
cached](https://react.dev/reference/react/useSyncExternalStore#parameters)
so the wrapper reuses similar cache check mechanism as
`subscribeWithSelector` does internally.

Author: arnautov-anton

src/store/hooks/useStateStore.ts

@@ -1,7 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useMemo } from 'react';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 import type { StateStore } from 'stream-chat';
 
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const noop = () => {};
+
 export function useStateStore<
   T extends Record<string, unknown>,
   O extends Readonly<Record<string, unknown> | Readonly<unknown[]>>,
@@ -14,18 +18,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;
 }