diff --git a/src/index.ts b/src/index.ts index 4fa35980..b2db8fc3 100644 --- a/src/index.ts +++ b/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'; diff --git a/src/ref.ts b/src/ref.ts index 1d0ca878..012ea2f2 100644 --- a/src/ref.ts +++ b/src/ref.ts @@ -32,7 +32,7 @@ export function useComposeRef(...refs: React.Ref[]): React.Ref { () => 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]), ); } diff --git a/tests/ref.test.js b/tests/ref.test.js index acc7c520..7ad8651b 100644 --- a/tests/ref.test.js +++ b/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 ( + + ); + }; + + const { container, unmount } = render(); + 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', () => {