Adjust events & maps, removing unexpected firing (#8489)

packages/react-hooks/src/useEventChanges.ts

@@ -36,7 +36,7 @@ function interleave <T extends Codec> (existing: T[] = [], { added = [], removed
     delete map[v.toHex()];
   });
 
-  return Object
+  const adjusted = Object
     .entries(map)
     .sort((a, b) =>
       // for BN-like objects, we use the built-in compare for sorting
@@ -45,6 +45,10 @@ function interleave <T extends Codec> (existing: T[] = [], { added = [], removed
         : a[0].localeCompare(b[0])
     )
     .map(([, v]) => v);
+
+  return adjusted.length !== existing.length || adjusted.find((e, i) => !e.eq(existing[i]))
+    ? adjusted
+    : existing;
 }
 
 export function useEventChanges <T extends Codec, A> (checks: EventCheck[], filter: (records: EventRecord[], api: ApiPromise, additional?: A) => Changes<T>, startValue?: T[], additional?: A): T[] | undefined {

packages/react-hooks/src/useMapEntries.ts

@@ -3,7 +3,9 @@
 
 import type { QueryableStorageEntry } from '@polkadot/api/types';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { stringify } from '@polkadot/util';
 
 interface Options <T> {
   transform?: (value: any[]) => T;
@@ -12,17 +14,26 @@ interface Options <T> {
 // FIXME This is generic, we cannot really use createNamedHook
 export function useMapEntries <T = any> (entry: QueryableStorageEntry<'promise'> | null | false | undefined, params: unknown[], { transform }: Options<T> = {}, at?: string | null | false): T | undefined {
   const [state, setState] = useState<T | undefined>();
+  const checkRef = useRef<string | null>(null);
 
   useEffect((): void => {
-    entry && (
-      at && at !== '0'
-        ? entry.entriesAt(at, ...params)
-        : entry.entries(...params)
-    ).then((entries) => setState(
-      transform
-        ? transform(entries)
-        : entries as unknown as T
-    )).catch(console.error);
+    if (entry) {
+      const check = stringify({ at, params });
+
+      if (check !== checkRef.current) {
+        checkRef.current = check;
+
+        (
+          at && at !== '0'
+            ? entry.entriesAt(at, ...params)
+            : entry.entries(...params)
+        ).then((entries) => setState(
+          transform
+            ? transform(entries)
+            : entries as unknown as T
+        )).catch(console.error);
+      }
+    }
   }, [at, entry, params, transform]);
 
   return state;

packages/react-hooks/src/useMapKeys.ts

@@ -3,7 +3,9 @@
 
 import type { QueryableStorageEntry } from '@polkadot/api/types';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+
+import { stringify } from '@polkadot/util';
 
 interface Options <T> {
   transform?: (value: any[]) => T[];
@@ -12,17 +14,26 @@ interface Options <T> {
 // FIXME This is generic, we cannot really use createNamedHook
 export function useMapKeys <T = any> (entry: QueryableStorageEntry<'promise'> | null | false | undefined, params: unknown[], { transform }: Options<T> = {}, at?: string | null | false): T[] | undefined {
   const [state, setState] = useState<T[] | undefined>();
+  const checkRef = useRef<string | null>(null);
 
   useEffect((): void => {
-    entry && (
-      at && at !== '0'
-        ? entry.keysAt(at, ...params)
-        : entry.keys(...params)
-    ).then((keys) => setState(
-      transform
-        ? transform(keys)
-        : keys as unknown as T[]
-    )).catch(console.error);
+    if (entry) {
+      const check = stringify({ at, params });
+
+      if (check !== checkRef.current) {
+        checkRef.current = check;
+
+        (
+          at && at !== '0'
+            ? entry.keysAt(at, ...params)
+            : entry.keys(...params)
+        ).then((keys) => setState(
+          transform
+            ? transform(keys)
+            : keys as unknown as T[]
+        )).catch(console.error);
+      }
+    }
   }, [at, entry, params, transform]);
 
   return state;