Adjust useMemoValue (straight ref compares) (#8858)

packages/react-hooks/src/useMemoValue.spec.ts

@@ -1,7 +1,9 @@
 // Copyright 2017-2023 @polkadot/react-components authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { isDifferent } from './useMemoValue';
+import { stringify } from '@polkadot/util';
+
+import { getMemoValue, isDifferent } from './useMemoValue';
 
 describe('useMemoValue', (): void => {
   describe('isDifferent', (): void => {
@@ -57,4 +59,22 @@ describe('useMemoValue', (): void => {
       )).toEqual(true);
     });
   });
+
+  describe('getMemoValue', (): void => {
+    it('returns a new value when the previous is empty', (): void => {
+      expect(getMemoValue({ current: null }, 2)).toEqual(2);
+    });
+
+    it('returns a new value when the previous is a different type', (): void => {
+      expect(getMemoValue<unknown>({ current: { stringified: stringify({ value: 2 }), value: 2 } }, '2')).toEqual('2');
+    });
+
+    it('returns the previous value when different objects, but the same representation', (): void => {
+      const a = { some: { thing: 'test', zaz: [1, 2, 3] } };
+      const b = { some: { thing: 'test', zaz: [1, 2, 3] } };
+
+      expect(a === b).toEqual(false);
+      expect(getMemoValue({ current: { stringified: stringify({ value: a }), value: a } }, b) === a).toEqual(true);
+    });
+  });
 });

packages/react-hooks/src/useMemoValue.ts

@@ -10,6 +10,11 @@ interface State<T> {
   value: T;
 }
 
+// since we use these in tests, we are not using React.MutableRef<State<T>>
+interface Ref<T> {
+  current: State<T> | null;
+}
+
 /**
  * @internal
  *
@@ -29,7 +34,7 @@ export function isDifferent (a: unknown, b: unknown, depth = -1): boolean {
       ? a.some((ai, i) => isDifferent(ai, b[i], depth))
       // not equal and not an array
       : true
-    // straigh match, exact object found
+    // exact value match found
     : false;
 }
 
@@ -39,23 +44,17 @@ export function isDifferent (a: unknown, b: unknown, depth = -1): boolean {
  * Checks the supplied value against the previous state, returning either the
  * previous state (if we have a match) or a new object for future compares.
  **/
-export function getMemoValue <T> (ref: { current: State<T> | null }, value: T): T {
-  let curr = ref.current;
-
+export function getMemoValue <T> (ref: Ref<T>, value: T): T {
   // check that either we have no previous or the value changed
-  if (!curr || isDifferent(curr.value, value)) {
+  if (!ref.current || isDifferent(ref.current.value, value)) {
     const stringified = stringify({ value });
 
     // no previous or the stringified result is different
-    if (!curr || curr.stringified !== stringified) {
-      curr = { stringified, value };
+    if (!ref.current || ref.current.stringified !== stringified) {
+      ref.current = { stringified, value };
     }
   }
 
-  if (ref.current !== curr) {
-    ref.current = curr;
-  }
-
   return ref.current.value;
 }