Add docs

packages/compose/README.md

@@ -278,11 +278,15 @@ _Returns_
 
 <a name="useMergeRefs" href="#useMergeRefs">#</a> **useMergeRefs**
 
-Merges refs.
+Merges refs into one ref callback. Ensures the merged ref callbacks are only
+called when it changes or when the ref value changes. If you don't wish a ref
+callback to be called on every render, wrap it with `useCallback( ref, [] )`.
+Dependencies can be added, but when a dependency changes, the ref callback
+will be called with the same node.
 
 _Parameters_
 
--   _refs_ `Array`: 
+-   _refs_ `Array<(RefObject|RefCallback)>`: The refs to be merged.
 
 <a name="usePrevious" href="#usePrevious">#</a> **usePrevious**
 

packages/compose/src/hooks/use-merge-refs/index.js

@@ -3,10 +3,17 @@
  */
 import { useRef, useCallback } from '@wordpress/element';
 
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/** @typedef {import('@wordpress/element').RefCallback} RefCallback */
+
 /**
- * Merges refs.
+ * Merges refs into one ref callback. Ensures the merged ref callbacks are only
+ * called when it changes or when the ref value changes. If you don't wish a ref
+ * callback to be called on every render, wrap it with `useCallback( ref, [] )`.
+ * Dependencies can be added, but when a dependency changes, the ref callback
+ * will be called with the same node.
  *
- * @param {Array} refs
+ * @param {Array<RefObject|RefCallback>} refs The refs to be merged.
  */
 export default function useMergeRefs( refs ) {
 	const lastValue = useRef( null );
@@ -24,7 +31,7 @@ export default function useMergeRefs( refs ) {
 				) {
 					ref( value );
 				}
-			} else if ( ref ) {
+			} else if ( ref && ref.hasOwnProperty( 'current' ) ) {
 				ref.current = value;
 			}
 		} );