diff --git a/packages/react-hooks/src/useMemoValue.spec.ts b/packages/react-hooks/src/useMemoValue.spec.ts index a0b3537de6..5dbeacfda6 100644 --- a/packages/react-hooks/src/useMemoValue.spec.ts +++ b/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({ 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); + }); + }); }); diff --git a/packages/react-hooks/src/useMemoValue.ts b/packages/react-hooks/src/useMemoValue.ts index 208717c311..31782a4625 100644 --- a/packages/react-hooks/src/useMemoValue.ts +++ b/packages/react-hooks/src/useMemoValue.ts @@ -10,6 +10,11 @@ interface State { value: T; } +// since we use these in tests, we are not using React.MutableRef> +interface Ref { + current: State | 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 (ref: { current: State | null }, value: T): T { - let curr = ref.current; - +export function getMemoValue (ref: Ref, 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; }