From ebb36e9c630f084015474527dad8c9f1b59ebfd0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 3 Jan 2023 16:55:26 +0800
Subject: [PATCH 1/2] test: test driven

---
 src/Immutable.tsx        | 12 +++++++++---
 tests/immutable.test.tsx | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/Immutable.tsx b/src/Immutable.tsx
index 64cd9f1..6ed958e 100644
--- a/src/Immutable.tsx
+++ b/src/Immutable.tsx
@@ -34,7 +34,13 @@ export function makeImmutable<T extends React.ComponentType<any>>(Component: T):
  * Wrapped Component with `React.memo`.
  * But will rerender when parent with `makeImmutable` rerender.
  */
-export function responseImmutable<T extends React.ComponentType<any>>(Component: T): T {
+export function responseImmutable<T extends React.ComponentType<any>>(
+  Component: T,
+  propsAreEqual?: (
+    prevProps: Readonly<React.ComponentProps<T>>,
+    nextProps: Readonly<React.ComponentProps<T>>,
+  ) => boolean,
+): T {
   const refAble = supportRef(Component);
 
   const ImmutableComponent = function (props: any, ref: any) {
@@ -51,6 +57,6 @@ export function responseImmutable<T extends React.ComponentType<any>>(Component:
   }
 
   return refAble
-    ? React.memo(React.forwardRef(ImmutableComponent))
-    : (React.memo(ImmutableComponent) as any);
+    ? React.memo(React.forwardRef(ImmutableComponent), propsAreEqual)
+    : (React.memo(ImmutableComponent, propsAreEqual) as any);
 }
diff --git a/tests/immutable.test.tsx b/tests/immutable.test.tsx
index da355bf..998ae8c 100644
--- a/tests/immutable.test.tsx
+++ b/tests/immutable.test.tsx
@@ -95,4 +95,27 @@ describe('Immutable', () => {
     expect(rootRef.current).toBe(container.querySelector('.root'));
     expect(rawRef.current).toBe(container.querySelector('.raw'));
   });
+
+  it('customize propsAreEqual', () => {
+    const Input: React.FC<{
+      value: string;
+      onChange: React.ChangeEventHandler<HTMLInputElement>;
+    }> = props => (
+      <>
+        <input {...props} />
+        <RenderTimer id="input" />
+      </>
+    );
+
+    const ImmutableInput = responseImmutable(Input);
+
+    const { container, rerender } = render(<ImmutableInput value="same" onChange={() => {}} />);
+    expect(container.querySelector('#input').textContent).toEqual('1');
+
+    rerender(<ImmutableInput value="same" onChange={() => {}} />);
+    expect(container.querySelector('#input').textContent).toEqual('1');
+
+    rerender(<ImmutableInput value="not-same" onChange={() => {}} />);
+    expect(container.querySelector('#input').textContent).toEqual('2');
+  });
 });

From 78255b0a3efe22fe1dd4881addcd951c4e7b1ad0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 3 Jan 2023 16:56:41 +0800
Subject: [PATCH 2/2] test: test case

---
 tests/immutable.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/immutable.test.tsx b/tests/immutable.test.tsx
index 998ae8c..9b162b9 100644
--- a/tests/immutable.test.tsx
+++ b/tests/immutable.test.tsx
@@ -107,7 +107,7 @@ describe('Immutable', () => {
       </>
     );
 
-    const ImmutableInput = responseImmutable(Input);
+    const ImmutableInput = responseImmutable(Input, (prev, next) => prev.value === next.value);
 
     const { container, rerender } = render(<ImmutableInput value="same" onChange={() => {}} />);
     expect(container.querySelector('#input').textContent).toEqual('1');