main 🧊 rework use previous

Author: babin

src/hooks/usePrevious/usePrevious.test.ts

@@ -18,6 +18,48 @@ it('Should return previous value after update', () => {
   rerender(1);
   expect(result.current).toBe(0);
 
-  rerender(2);
+  rerender(Number.NaN);
   expect(result.current).toBe(1);
+
+  rerender(0);
+  expect(result.current).toBe(Number.NaN);
+
+  rerender(-0);
+  expect(result.current).toBe(0);
+
+  rerender(1);
+  expect(result.current).toBe(-0);
+});
+
+it('Should return previous object value after update', () => {
+  const { result, rerender } = renderHook((state) => usePrevious(state), {
+    initialProps: { count: 0 }
+  });
+
+  expect(result.current).toBe(undefined);
+
+  rerender({ count: 1 });
+  expect(result.current).toStrictEqual({ count: 0 });
+
+  rerender({ count: 2 });
+  expect(result.current).toStrictEqual({ count: 1 });
+});
+
+it('Should return previous object with custom options.equality', () => {
+  const equality = (prev: any, next: any) => JSON.stringify(prev) === JSON.stringify(next); // Deep equality check
+
+  const { result, rerender } = renderHook((state) => usePrevious(state, { equality }), {
+    initialProps: { count: 0, data: [1, 2, 3] }
+  });
+
+  expect(result.current).toBe(undefined);
+
+  rerender({ count: 0, data: [1, 2, 3] });
+  expect(result.current).toBe(undefined);
+
+  rerender({ count: 1, data: [1, 2, 3] });
+  expect(result.current).toStrictEqual({ count: 0, data: [1, 2, 3] });
+
+  rerender({ count: 2, data: [4, 5, 6] });
+  expect(result.current).toStrictEqual({ count: 1, data: [1, 2, 3] });
 });

src/hooks/usePrevious/usePrevious.ts

@@ -1,4 +1,8 @@
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
+
+export interface UsePreviousOptions<Value> {
+  equality: (a: Value, b: Value) => boolean;
+}
 
 /**
  * @name usePrevious
@@ -7,17 +11,22 @@ import { useEffect, useRef } from 'react';
  *
  * @template Value The type of the value
  * @param {Value} value The value to get the previous value
+ * @param {(a: Value, b: Value) => boolean} [options.equality] The custom equality function to determine if the value has changed
  * @returns {Value} The previous value
  *
  * @example
  * const prevValue = usePrevious(value);
  */
-export const usePrevious = <Value>(value: Value) => {
-  const ref = useRef<Value>();
+export const usePrevious = <Value>(value: Value, options?: UsePreviousOptions<Value>) => {
+  const currentRef = useRef<Value>(value);
+  const previousRef = useRef<Value>();
+
+  const equality = options?.equality ?? Object.is;
 
-  useEffect(() => {
-    ref.current = value;
-  });
+  if (!equality(value, currentRef.current)) {
+    previousRef.current = currentRef.current;
+    currentRef.current = value;
+  }
 
-  return ref.current;
+  return previousRef.current;
 };