fix: useComposeRef memo logic (#458)

Author: zombieJ

src/index.ts

@@ -1,4 +1,6 @@
+export { default as useEvent } from './hooks/useEvent';
 export { default as useMergedState } from './hooks/useMergedState';
+export { useComposeRef } from './ref';
 export { default as get } from './utils/get';
 export { default as set } from './utils/set';
 export { default as warning } from './warning';

src/ref.ts

@@ -32,7 +32,7 @@ export function useComposeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
     () => composeRef(...refs),
     refs,
     (prev, next) =>
-      prev.length === next.length && prev.every((ref, i) => ref === next[i]),
+      prev.length !== next.length || prev.every((ref, i) => ref !== next[i]),
   );
 }
 

tests/ref.test.js

@@ -1,6 +1,7 @@
 /* eslint-disable no-eval */
+import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import { render } from '@testing-library/react';
+import useEvent from '../src/hooks/useEvent';
 import { composeRef, supportRef, useComposeRef } from '../src/ref';
 
 describe('ref', () => {
@@ -35,6 +36,37 @@ describe('ref', () => {
       expect(ref1.current).toBeTruthy();
       expect(ref1.current).toBe(ref2.current);
     });
+
+    it('useComposeRef not changed', () => {
+      let count = 0;
+
+      const Demo = () => {
+        const [, forceUpdate] = React.useState({});
+
+        const ref1 = React.useRef();
+        const ref2 = React.useRef();
+        const refFn = useEvent(() => {
+          count += 1;
+        });
+        const mergedRef = useComposeRef(ref1, ref2, refFn);
+        return (
+          <button ref={mergedRef} onClick={() => forceUpdate({})}>
+            Update
+          </button>
+        );
+      };
+
+      const { container, unmount } = render(<Demo />);
+      expect(count).toEqual(1);
+
+      for (let i = 0; i < 10; i += 1) {
+        fireEvent.click(container.querySelector('button'));
+        expect(count).toEqual(1);
+      }
+
+      unmount();
+      expect(count).toEqual(2);
+    });
   });
 
   describe('supportRef', () => {