chore: Add useComposeRef hook

src/ref.ts

@@ -1,6 +1,7 @@
 /* eslint-disable no-param-reassign */
-import * as React from 'react';
+import type * as React from 'react';
 import { isMemo } from 'react-is';
+import useMemo from './hooks/useMemo';
 
 export function fillRef<T>(ref: React.Ref<T>, node: T) {
   if (typeof ref === 'function') {
@@ -14,13 +15,27 @@ export function fillRef<T>(ref: React.Ref<T>, node: T) {
  * Merge refs into one ref function to support ref passing.
  */
 export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
+  const refList = refs.filter(ref => ref);
+  if (refList.length <= 1) {
+    return refList[0];
+  }
+
   return (node: T) => {
     refs.forEach(ref => {
       fillRef(ref, node);
     });
   };
 }
 
+export function useComposeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
+  return useMemo(
+    () => composeRef(...refs),
+    refs,
+    (prev, next) =>
+      prev.length === next.length && prev.every((ref, i) => ref === next[i]),
+  );
+}
+
 export function supportRef(nodeOrComponent: any): boolean {
   const type = isMemo(nodeOrComponent)
     ? nodeOrComponent.type.type

tests/ref.test.js

@@ -1,18 +1,40 @@
 /* eslint-disable no-eval */
 import React from 'react';
 import { mount } from 'enzyme';
-import { composeRef, supportRef } from '../src/ref';
+import { composeRef, supportRef, useComposeRef } from '../src/ref';
 
 describe('ref', () => {
-  it('composeRef', () => {
-    const refFunc1 = jest.fn();
-    const refFunc2 = jest.fn();
+  describe('composeRef', () => {
+    it('basic', () => {
+      const refFunc1 = jest.fn();
+      const refFunc2 = jest.fn();
 
-    const mergedRef = composeRef(refFunc1, refFunc2);
-    const testRefObj = {};
-    mergedRef(testRefObj);
-    expect(refFunc1).toHaveBeenCalledWith(testRefObj);
-    expect(refFunc2).toHaveBeenCalledWith(testRefObj);
+      const mergedRef = composeRef(refFunc1, refFunc2);
+      const testRefObj = {};
+      mergedRef(testRefObj);
+      expect(refFunc1).toHaveBeenCalledWith(testRefObj);
+      expect(refFunc2).toHaveBeenCalledWith(testRefObj);
+    });
+
+    it('ignore empty', () => {
+      const ref = React.createRef();
+      expect(composeRef(undefined, ref, null)).toBe(ref);
+      expect(composeRef(undefined, null)).toBeFalsy();
+    });
+
+    it('useComposeRef', () => {
+      const Demo = ({ ref1, ref2 }) => {
+        const mergedRef = useComposeRef(ref1, ref2);
+        return <div ref={mergedRef} />;
+      };
+
+      const ref1 = React.createRef();
+      const ref2 = React.createRef();
+      mount(<Demo ref1={ref1} ref2={ref2} />);
+
+      expect(ref1.current).toBeTruthy();
+      expect(ref1.current).toBe(ref2.current);
+    });
   });
 
   describe('supportRef', () => {

tests/warning.test.js

@@ -1,4 +1,3 @@
-/* eslint-disable import/no-named-as-default */
 import React from 'react';
 import { mount } from 'enzyme';
 import warning, { resetWarned, noteOnce } from '../src/warning';