From 95551d91cf07871842b98d6270391ebe9608e589 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20van=C2=A0Durpe?= <wp@iseulde.com>
Date: Mon, 8 Feb 2021 16:08:34 +0200
Subject: [PATCH] Try: useMergeRefs (#27768)

* Try: useMergeRefs

* update lock file

* Rebase fixes

* Add docs

* Clearer documentation

* wip

* wip

* Add docs for unit tests

* Convert new additions
---
 package-lock.json                             |  13 +-
 packages/block-editor/package.json            |   1 -
 .../src/components/iframe/index.js            |   4 +-
 packages/components/package.json              |   1 -
 packages/components/src/modal/frame.js        |   4 +-
 packages/components/src/panel/body.js         |   5 +-
 packages/components/src/popover/index.js      |  14 +-
 packages/compose/README.md                    |  18 ++
 packages/compose/package.json                 |   1 -
 .../src/hooks/use-callback-ref/index.js       |  20 --
 .../hooks/use-constrained-tabbing/index.js    |   8 +-
 .../compose/src/hooks/use-dialog/index.js     |  13 +-
 .../src/hooks/use-focus-on-mount/index.js     |   9 +-
 .../src/hooks/use-focus-return/index.js       |   9 +-
 .../compose/src/hooks/use-merge-refs/index.js |  74 ++++++
 .../src/hooks/use-merge-refs/test/index.js    | 221 ++++++++++++++++++
 packages/compose/src/index.js                 |   1 +
 packages/edit-post/package.json               |   1 -
 .../src/components/visual-editor/index.js     |  14 +-
 packages/interface/package.json               |   4 +-
 .../components/interface-skeleton/index.js    |   9 +-
 21 files changed, 344 insertions(+), 100 deletions(-)
 delete mode 100644 packages/compose/src/hooks/use-callback-ref/index.js
 create mode 100644 packages/compose/src/hooks/use-merge-refs/index.js
 create mode 100644 packages/compose/src/hooks/use-merge-refs/test/index.js

diff --git a/package-lock.json b/package-lock.json
index 2ac5ed04fb7fc9..22c96db849cbb3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11827,7 +11827,6 @@
 				"lodash": "^4.17.19",
 				"memize": "^1.1.0",
 				"react-autosize-textarea": "^7.1.0",
-				"react-merge-refs": "^1.0.0",
 				"react-spring": "^8.0.19",
 				"redux-multi": "^0.1.12",
 				"rememo": "^3.0.0",
@@ -11956,7 +11955,6 @@
 				"moment": "^2.22.1",
 				"re-resizable": "^6.4.0",
 				"react-dates": "^17.1.1",
-				"react-merge-refs": "^1.0.0",
 				"react-resize-aware": "^3.1.0",
 				"react-spring": "^8.0.20",
 				"react-use-gesture": "^9.0.0",
@@ -11980,7 +11978,6 @@
 				"lodash": "^4.17.19",
 				"memize": "^1.1.0",
 				"mousetrap": "^1.6.5",
-				"react-merge-refs": "^1.0.0",
 				"react-resize-aware": "^3.1.0",
 				"use-memo-one": "^1.1.1"
 			}
@@ -12199,7 +12196,6 @@
 				"classnames": "^2.2.5",
 				"lodash": "^4.17.19",
 				"memize": "^1.1.0",
-				"react-merge-refs": "^1.0.0",
 				"rememo": "^3.0.0"
 			}
 		},
@@ -12421,6 +12417,7 @@
 			"requires": {
 				"@babel/runtime": "^7.12.5",
 				"@wordpress/components": "file:packages/components",
+				"@wordpress/compose": "file:packages/compose",
 				"@wordpress/data": "file:packages/data",
 				"@wordpress/deprecated": "file:packages/deprecated",
 				"@wordpress/element": "file:packages/element",
@@ -12429,8 +12426,7 @@
 				"@wordpress/plugins": "file:packages/plugins",
 				"@wordpress/viewport": "file:packages/viewport",
 				"classnames": "^2.2.5",
-				"lodash": "^4.17.19",
-				"react-merge-refs": "^1.0.0"
+				"lodash": "^4.17.19"
 			}
 		},
 		"@wordpress/is-shallow-equal": {
@@ -47167,11 +47163,6 @@
 			"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
 			"dev": true
 		},
-		"react-merge-refs": {
-			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.0.0.tgz",
-			"integrity": "sha512-VkvWuCR5VoTjb+VYUcOjkFo66HDv1Hw8VjKcwQtWr2lJnT8g7epRRyfz8+Zkl2WhwqNeqR0gIe0XYrBa9ePeXg=="
-		},
 		"react-moment-proptypes": {
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/react-moment-proptypes/-/react-moment-proptypes-1.7.0.tgz",
diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json
index 0e755c2b46b4a8..d8c47dcf9426b1 100644
--- a/packages/block-editor/package.json
+++ b/packages/block-editor/package.json
@@ -60,7 +60,6 @@
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"react-autosize-textarea": "^7.1.0",
-		"react-merge-refs": "^1.0.0",
 		"react-spring": "^8.0.19",
 		"redux-multi": "^0.1.12",
 		"rememo": "^3.0.0",
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 32366d1e3863ec..cc0b350cc0f7bc 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import mergeRefs from 'react-merge-refs';
 import { compact, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
@@ -16,6 +15,7 @@ import {
 	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -211,7 +211,7 @@ function Iframe( { contentRef, editorStyles, children, head, ...props }, ref ) {
 	return (
 		<iframe
 			{ ...props }
-			ref={ useCallback( mergeRefs( [ ref, setRef ] ), [] ) }
+			ref={ useMergeRefs( [ ref, setRef ] ) }
 			tabIndex="0"
 			title={ __( 'Editor canvas' ) }
 			name="editor-canvas"
diff --git a/packages/components/package.json b/packages/components/package.json
index 89c40661ab3329..ec3decc9cfe84a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -59,7 +59,6 @@
 		"moment": "^2.22.1",
 		"re-resizable": "^6.4.0",
 		"react-dates": "^17.1.1",
-		"react-merge-refs": "^1.0.0",
 		"react-resize-aware": "^3.1.0",
 		"react-spring": "^8.0.20",
 		"react-use-gesture": "^9.0.0",
diff --git a/packages/components/src/modal/frame.js b/packages/components/src/modal/frame.js
index 8047832a6ec444..c1cbfd2d79a0b5 100644
--- a/packages/components/src/modal/frame.js
+++ b/packages/components/src/modal/frame.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import mergeRefs from 'react-merge-refs';
 
 /**
  * WordPress dependencies
@@ -14,6 +13,7 @@ import {
 	useFocusReturn,
 	useFocusOnMount,
 	useConstrainedTabbing,
+	useMergeRefs,
 } from '@wordpress/compose';
 
 /**
@@ -57,7 +57,7 @@ function ModalFrameContent( {
 			<div
 				className={ classnames( 'components-modal__frame', className ) }
 				style={ style }
-				ref={ mergeRefs( [
+				ref={ useMergeRefs( [
 					constrainedTabbingRef,
 					focusReturnRef,
 					focusOnMountRef,
diff --git a/packages/components/src/panel/body.js b/packages/components/src/panel/body.js
index 8496633357e027..d966dd92b47d33 100644
--- a/packages/components/src/panel/body.js
+++ b/packages/components/src/panel/body.js
@@ -3,12 +3,11 @@
  */
 import classnames from 'classnames';
 import { noop } from 'lodash';
-import mergeRefs from 'react-merge-refs';
 
 /**
  * WordPress dependencies
  */
-import { useReducedMotion } from '@wordpress/compose';
+import { useReducedMotion, useMergeRefs } from '@wordpress/compose';
 import { forwardRef, useRef } from '@wordpress/element';
 import { chevronUp, chevronDown } from '@wordpress/icons';
 
@@ -77,7 +76,7 @@ export function PanelBody(
 	} );
 
 	return (
-		<div className={ classes } ref={ mergeRefs( [ nodeRef, ref ] ) }>
+		<div className={ classes } ref={ useMergeRefs( [ nodeRef, ref ] ) }>
 			<PanelBodyTitle
 				icon={ icon }
 				isOpened={ isOpened }
diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js
index 90cee30f2c81b9..10336f42e745cd 100644
--- a/packages/components/src/popover/index.js
+++ b/packages/components/src/popover/index.js
@@ -2,17 +2,11 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import mergeRefs from 'react-merge-refs';
 
 /**
  * WordPress dependencies
  */
-import {
-	useRef,
-	useState,
-	useLayoutEffect,
-	useCallback,
-} from '@wordpress/element';
+import { useRef, useState, useLayoutEffect } from '@wordpress/element';
 import { getRectangleFromRange } from '@wordpress/dom';
 import { ESCAPE } from '@wordpress/keycodes';
 import deprecated from '@wordpress/deprecated';
@@ -23,6 +17,7 @@ import {
 	__experimentalUseFocusOutside as useFocusOutside,
 	useConstrainedTabbing,
 	useFocusReturn,
+	useMergeRefs,
 } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
 
@@ -492,13 +487,12 @@ const Popover = ( {
 	const focusReturnRef = useFocusReturn();
 	const focusOnMountRef = useFocusOnMount( focusOnMount );
 	const focusOutsideProps = useFocusOutside( handleOnFocusOutside );
-	const allRefs = [
+	const mergedRefs = useMergeRefs( [
 		containerRef,
 		focusOnMount ? constrainedTabbingRef : null,
 		focusOnMount ? focusReturnRef : null,
 		focusOnMount ? focusOnMountRef : null,
-	];
-	const mergedRefs = useCallback( mergeRefs( allRefs ), allRefs );
+	] );
 
 	// Event handlers
 	const maybeClose = ( event ) => {
diff --git a/packages/compose/README.md b/packages/compose/README.md
index 9fd08d2e0235ad..de6183d328ff86 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -282,6 +282,24 @@ _Returns_
 
 -   `boolean`: return value of the media query.
 
+<a name="useMergeRefs" href="#useMergeRefs">#</a> **useMergeRefs**
+
+Merges refs into one ref callback. Ensures the merged ref callbacks are only
+called when it changes (as a result of a `useCallback` dependency update) 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 old ref
+callback will be called with `null` and the new ref callback will be called
+with the same node.
+
+_Parameters_
+
+-   _refs_ `Array<(RefObject|RefCallback)>`: The refs to be merged.
+
+_Returns_
+
+-   `RefCallback`: The merged ref callback.
+
 <a name="usePrevious" href="#usePrevious">#</a> **usePrevious**
 
 Use something's value from the previous render.
diff --git a/packages/compose/package.json b/packages/compose/package.json
index 8d1a15063ae481..120a6150170fc9 100644
--- a/packages/compose/package.json
+++ b/packages/compose/package.json
@@ -36,7 +36,6 @@
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
 		"mousetrap": "^1.6.5",
-		"react-merge-refs": "^1.0.0",
 		"react-resize-aware": "^3.1.0",
 		"use-memo-one": "^1.1.1"
 	},
diff --git a/packages/compose/src/hooks/use-callback-ref/index.js b/packages/compose/src/hooks/use-callback-ref/index.js
deleted file mode 100644
index 0877607027acf6..00000000000000
--- a/packages/compose/src/hooks/use-callback-ref/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import memize from 'memize';
-
-/**
- * WordPress dependencies
- */
-import { useCallback } from '@wordpress/element';
-
-function useCallbackRef( callback, deps ) {
-	return useCallback(
-		memize( callback, {
-			maxSize: 1,
-		} ),
-		deps
-	);
-}
-
-export default useCallbackRef;
diff --git a/packages/compose/src/hooks/use-constrained-tabbing/index.js b/packages/compose/src/hooks/use-constrained-tabbing/index.js
index 55011151a6a74d..b7b3ce3d6eed79 100644
--- a/packages/compose/src/hooks/use-constrained-tabbing/index.js
+++ b/packages/compose/src/hooks/use-constrained-tabbing/index.js
@@ -3,11 +3,7 @@
  */
 import { TAB } from '@wordpress/keycodes';
 import { focus } from '@wordpress/dom';
-
-/**
- * Internal dependencies
- */
-import useCallbackRef from '../use-callback-ref';
+import { useCallback } from '@wordpress/element';
 
 /**
  * In Dialogs/modals, the tabbing must be constrained to the content of
@@ -31,7 +27,7 @@ import useCallbackRef from '../use-callback-ref';
  * ```
  */
 function useConstrainedTabbing() {
-	const ref = useCallbackRef( ( node ) => {
+	const ref = useCallback( ( node ) => {
 		if ( ! node ) {
 			return;
 		}
diff --git a/packages/compose/src/hooks/use-dialog/index.js b/packages/compose/src/hooks/use-dialog/index.js
index 3e0ab9d29dac8b..777ab66b15b698 100644
--- a/packages/compose/src/hooks/use-dialog/index.js
+++ b/packages/compose/src/hooks/use-dialog/index.js
@@ -1,12 +1,7 @@
-/**
- * External dependencies
- */
-import mergeRefs from 'react-merge-refs';
-
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, useCallback } from '@wordpress/element';
 import { ESCAPE } from '@wordpress/keycodes';
 
 /**
@@ -16,7 +11,7 @@ import useConstrainedTabbing from '../use-constrained-tabbing';
 import useFocusOnMount from '../use-focus-on-mount';
 import useFocusReturn from '../use-focus-return';
 import useFocusOutside from '../use-focus-outside';
-import useCallbackRef from '../use-callback-ref';
+import useMergeRefs from '../use-merge-refs';
 
 /**
  * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:
@@ -36,7 +31,7 @@ function useDialog( options ) {
 	const focusOnMountRef = useFocusOnMount();
 	const focusReturnRef = useFocusReturn();
 	const focusOutsideProps = useFocusOutside( options.onClose );
-	const closeOnEscapeRef = useCallbackRef( ( node ) => {
+	const closeOnEscapeRef = useCallback( ( node ) => {
 		if ( ! node ) {
 			return;
 		}
@@ -51,7 +46,7 @@ function useDialog( options ) {
 	}, [] );
 
 	return [
-		mergeRefs( [
+		useMergeRefs( [
 			constrainedTabbingRef,
 			focusReturnRef,
 			focusOnMountRef,
diff --git a/packages/compose/src/hooks/use-focus-on-mount/index.js b/packages/compose/src/hooks/use-focus-on-mount/index.js
index 54492d8b140f75..b0eb7184b6c446 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/index.js
+++ b/packages/compose/src/hooks/use-focus-on-mount/index.js
@@ -1,14 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, useCallback } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
-/**
- * Internal dependencies
- */
-import useCallbackRef from '../use-callback-ref';
-
 /**
  * Hook used to focus the first tabbable element on mount.
  *
@@ -36,7 +31,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 		focusOnMountRef.current = focusOnMount;
 	}, [ focusOnMount ] );
 
-	return useCallbackRef( ( node ) => {
+	return useCallback( ( node ) => {
 		if ( ! node || focusOnMountRef.current === false ) {
 			return;
 		}
diff --git a/packages/compose/src/hooks/use-focus-return/index.js b/packages/compose/src/hooks/use-focus-return/index.js
index 7f0d4ddad58c48..40187ff3dce3f2 100644
--- a/packages/compose/src/hooks/use-focus-return/index.js
+++ b/packages/compose/src/hooks/use-focus-return/index.js
@@ -1,12 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import useCallbackRef from '../use-callback-ref';
+import { useRef, useEffect, useCallback } from '@wordpress/element';
 
 /**
  * When opening modals/sidebars/dialogs, the focus
@@ -40,7 +35,7 @@ function useFocusReturn( onFocusReturn ) {
 		onFocusReturnRef.current = onFocusReturn;
 	}, [ onFocusReturn ] );
 
-	return useCallbackRef( ( node ) => {
+	return useCallback( ( node ) => {
 		if ( node ) {
 			// Set ref to be used when unmounting.
 			ref.current = node;
diff --git a/packages/compose/src/hooks/use-merge-refs/index.js b/packages/compose/src/hooks/use-merge-refs/index.js
new file mode 100644
index 00000000000000..0a6d012b2b5a84
--- /dev/null
+++ b/packages/compose/src/hooks/use-merge-refs/index.js
@@ -0,0 +1,74 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/** @typedef {import('@wordpress/element').RefCallback} RefCallback */
+
+/**
+ * Merges refs into one ref callback. Ensures the merged ref callbacks are only
+ * called when it changes (as a result of a `useCallback` dependency update) 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 old ref
+ * callback will be called with `null` and the new ref callback will be called
+ * with the same node.
+ *
+ * @param {Array<RefObject|RefCallback>} refs The refs to be merged.
+ *
+ * @return {RefCallback} The merged ref callback.
+ */
+export default function useMergeRefs( refs ) {
+	const element = useRef( null );
+	const didElementChange = useRef( false );
+	const previousRefs = useRef( refs );
+	const currentRefs = useRef( refs );
+
+	// Update on render before the ref callback is called, so the ref callback
+	// always has access to the current refs.
+	currentRefs.current = refs;
+
+	// If any of the refs change, call the previous ref with `null` and the new
+	// ref with the node, except when the element changes in the same cycle, in
+	// which case the ref callbacks will already have been called.
+	useLayoutEffect( () => {
+		refs.forEach( ( ref, index ) => {
+			const previousRef = previousRefs.current[ index ];
+
+			if (
+				typeof ref === 'function' &&
+				ref !== previousRef &&
+				didElementChange.current === false
+			) {
+				previousRef( null );
+				ref( element.current );
+			}
+		} );
+
+		previousRefs.current = refs;
+		didElementChange.current = false;
+	}, refs );
+
+	// There should be no dependencies so that `callback` is only called when
+	// the node changes.
+	return useCallback( ( value ) => {
+		// Update the element so it can be used when calling ref callbacks on a
+		// dependency change.
+		element.current = value;
+		didElementChange.current = true;
+
+		// When an element changes, the current ref callback should be called
+		// with the new element and the previous one with `null`.
+		const refsToUpdate = value ? currentRefs.current : previousRefs.current;
+
+		// Update the latest refs.
+		refsToUpdate.forEach( ( ref ) => {
+			if ( typeof ref === 'function' ) {
+				ref( value );
+			} else if ( ref && ref.hasOwnProperty( 'current' ) ) {
+				ref.current = value;
+			}
+		} );
+	}, [] );
+}
diff --git a/packages/compose/src/hooks/use-merge-refs/test/index.js b/packages/compose/src/hooks/use-merge-refs/test/index.js
new file mode 100644
index 00000000000000..0c156abe0c0a5b
--- /dev/null
+++ b/packages/compose/src/hooks/use-merge-refs/test/index.js
@@ -0,0 +1,221 @@
+/**
+ * External dependencies
+ */
+import ReactDOM from 'react-dom';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useMergeRefs from '../';
+
+describe( 'useMergeRefs', () => {
+	// Setup
+	// =====
+	//
+	// A component with two merged ref callbacks. The second has a dependency,
+	// the first does not. We expect the one with the dependency to be called
+	// with null in the old function and the node in the new function. We don't
+	// expect the first ref callback to be called **unless** the node changes.
+	// There's a prop controlling the tag name, which can be used to trigger a
+	// node change. In that case we expect both ref callbacks to be called with
+	// null in the old function and the **new** node in the new function.
+	//
+	// The history of all functions is recorded. Note that a new function is
+	// created on every render, which will all be tracked. Some functions are
+	// never expected to be called on subsequent renders if no callback
+	// dependency updates!
+
+	function renderCallback( args ) {
+		renderCallback.history.push( args );
+	}
+
+	renderCallback.history = [];
+
+	function MergedRefs( { count, tagName: TagName = 'div' } ) {
+		function refCallback1( value ) {
+			refCallback1.history.push( value );
+		}
+
+		refCallback1.history = [];
+
+		function refCallback2( value ) {
+			refCallback2.history.push( value );
+		}
+
+		refCallback2.history = [];
+
+		renderCallback( [ refCallback1.history, refCallback2.history ] );
+
+		return (
+			<TagName
+				ref={ useMergeRefs( [
+					useCallback( refCallback1, [] ),
+					useCallback( refCallback2, [ count ] ),
+				] ) }
+			/>
+		);
+	}
+
+	beforeEach( () => {
+		const rootElement = document.createElement( 'div' );
+		rootElement.id = 'root';
+		document.body.appendChild( rootElement );
+	} );
+
+	afterEach( () => {
+		// Reset all history and DOM.
+		renderCallback.history = [];
+		document.body.innerHTML = '';
+	} );
+
+	it( 'should work', () => {
+		const rootElement = document.getElementById( 'root' );
+
+		ReactDOM.render( <MergedRefs />, rootElement );
+
+		const originalElement = rootElement.firstElementChild;
+
+		// Render 1: both initial callback functions should be called with node.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [ originalElement ] ],
+		] );
+
+		ReactDOM.render( <MergedRefs />, rootElement );
+
+		// Render 2: the new callback functions should not be called! There has
+		// been no dependency change.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [ originalElement ] ],
+			[ [], [] ],
+		] );
+
+		ReactDOM.render( null, rootElement );
+
+		// Unmount: the initial callback functions should receive null.
+		expect( renderCallback.history ).toEqual( [
+			[
+				[ originalElement, null ],
+				[ originalElement, null ],
+			],
+			[ [], [] ],
+		] );
+	} );
+
+	it( 'should work for node change', () => {
+		const rootElement = document.getElementById( 'root' );
+
+		ReactDOM.render( <MergedRefs />, rootElement );
+
+		const originalElement = rootElement.firstElementChild;
+
+		ReactDOM.render( <MergedRefs tagName="button" />, rootElement );
+
+		const newElement = rootElement.firstElementChild;
+
+		// After a render with the original element and a second render with the
+		// new element, expect the initial callback functions to be called with
+		// the original element, then null, then the new element.
+		// Again, the new callback functions should not be called! There has
+		// been no dependency change.
+		expect( renderCallback.history ).toEqual( [
+			[
+				[ originalElement, null, newElement ],
+				[ originalElement, null, newElement ],
+			],
+			[ [], [] ],
+		] );
+
+		ReactDOM.render( null, rootElement );
+
+		// Unmount: the initial callback functions should receive null.
+		expect( renderCallback.history ).toEqual( [
+			[
+				[ originalElement, null, newElement, null ],
+				[ originalElement, null, newElement, null ],
+			],
+			[ [], [] ],
+		] );
+	} );
+
+	it( 'should work with dependencies', () => {
+		const rootElement = document.getElementById( 'root' );
+
+		ReactDOM.render( <MergedRefs count={ 1 } />, rootElement );
+
+		const originalElement = rootElement.firstElementChild;
+
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [ originalElement ] ],
+		] );
+
+		ReactDOM.render( <MergedRefs count={ 2 } />, rootElement );
+
+		// After a second render with a dependency change, expect the inital
+		// callback function to be called with null and the new callback
+		// function to be called with the original node. Note that for callback
+		// one no dependencies have changed.
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [ originalElement, null ] ],
+			[ [], [ originalElement ] ],
+		] );
+
+		ReactDOM.render( null, rootElement );
+
+		// Unmount: current callback functions should be called with null.
+		expect( renderCallback.history ).toEqual( [
+			[
+				[ originalElement, null ],
+				[ originalElement, null ],
+			],
+			[ [], [ originalElement, null ] ],
+		] );
+	} );
+
+	it( 'should simultaneously update node and dependencies', () => {
+		const rootElement = document.getElementById( 'root' );
+
+		ReactDOM.render( <MergedRefs count={ 1 } />, rootElement );
+
+		const originalElement = rootElement.firstElementChild;
+
+		expect( renderCallback.history ).toEqual( [
+			[ [ originalElement ], [ originalElement ] ],
+		] );
+
+		ReactDOM.render(
+			<MergedRefs count={ 2 } tagName="button" />,
+			rootElement
+		);
+
+		const newElement = rootElement.firstElementChild;
+
+		// Both the node changes and the dependencies update for the second
+		// callback, so expect the old callback function to be called with null
+		// and the new callback function to be called with the **new** node.
+		// For the first callback, we expect the initial function to be called
+		// with null and then the new node since no dependencies have changed.
+		expect( renderCallback.history ).toEqual( [
+			[
+				[ originalElement, null, newElement ],
+				[ originalElement, null ],
+			],
+			[ [], [ newElement ] ],
+		] );
+
+		ReactDOM.render( null, rootElement );
+
+		// Unmount: current callback functions should be called with null.
+		expect( renderCallback.history ).toEqual( [
+			[
+				[ originalElement, null, newElement, null ],
+				[ originalElement, null ],
+			],
+			[ [], [ newElement, null ] ],
+		] );
+	} );
+} );
diff --git a/packages/compose/src/index.js b/packages/compose/src/index.js
index 884fe0e8ce2e2a..4434827d5b44a1 100644
--- a/packages/compose/src/index.js
+++ b/packages/compose/src/index.js
@@ -32,3 +32,4 @@ export { default as useAsyncList } from './hooks/use-async-list';
 export { default as useWarnOnChange } from './hooks/use-warn-on-change';
 export { default as useDebounce } from './hooks/use-debounce';
 export { default as useThrottle } from './hooks/use-throttle';
+export { default as useMergeRefs } from './hooks/use-merge-refs';
diff --git a/packages/edit-post/package.json b/packages/edit-post/package.json
index ca9b974e16a9e9..154061d926d038 100644
--- a/packages/edit-post/package.json
+++ b/packages/edit-post/package.json
@@ -52,7 +52,6 @@
 		"classnames": "^2.2.5",
 		"lodash": "^4.17.19",
 		"memize": "^1.1.0",
-		"react-merge-refs": "^1.0.0",
 		"rememo": "^3.0.0"
 	},
 	"publishConfig": {
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
index 67703976efda56..085e2b4233fb02 100644
--- a/packages/edit-post/src/components/visual-editor/index.js
+++ b/packages/edit-post/src/components/visual-editor/index.js
@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import mergeRefs from 'react-merge-refs';
-
 /**
  * WordPress dependencies
  */
@@ -24,7 +19,8 @@ import {
 	__unstableUseEditorStyles as useEditorStyles,
 } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
-import { useRef, useCallback } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -64,17 +60,13 @@ export default function VisualEditor( { styles } ) {
 	useTypingObserver( ref );
 	useCanvasClickRedirect( ref );
 	const editorStylesRef = useEditorStyles( styles );
-	const mergedRefs = useCallback( mergeRefs( [ ref, editorStylesRef ] ), [
-		ref,
-		editorStylesRef,
-	] );
 
 	return (
 		<div className="edit-post-visual-editor">
 			<VisualEditorGlobalKeyboardShortcuts />
 			<Popover.Slot name="block-toolbar" />
 			<div
-				ref={ mergedRefs }
+				ref={ useMergeRefs( [ ref, editorStylesRef ] ) }
 				className="editor-styles-wrapper"
 				style={ resizedCanvasStyles || desktopCanvasStyles }
 			>
diff --git a/packages/interface/package.json b/packages/interface/package.json
index 51e12dbb3db5af..eb9f6828756a92 100644
--- a/packages/interface/package.json
+++ b/packages/interface/package.json
@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@babel/runtime": "^7.12.5",
 		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
 		"@wordpress/data": "file:../data",
 		"@wordpress/deprecated": "file:../deprecated",
 		"@wordpress/element": "file:../element",
@@ -38,8 +39,7 @@
 		"@wordpress/plugins": "file:../plugins",
 		"@wordpress/viewport": "file:../viewport",
 		"classnames": "^2.2.5",
-		"lodash": "^4.17.19",
-		"react-merge-refs": "^1.0.0"
+		"lodash": "^4.17.19"
 	},
 	"publishConfig": {
 		"access": "public"
diff --git a/packages/interface/src/components/interface-skeleton/index.js b/packages/interface/src/components/interface-skeleton/index.js
index 50e09332b59250..184f0ddde30056 100644
--- a/packages/interface/src/components/interface-skeleton/index.js
+++ b/packages/interface/src/components/interface-skeleton/index.js
@@ -2,14 +2,14 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import mergeRefs from 'react-merge-refs';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef, useCallback, useEffect, useRef } from '@wordpress/element';
+import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useMergeRefs } from '@wordpress/compose';
 
 function useHTMLClass( className ) {
 	useEffect( () => {
@@ -66,10 +66,7 @@ function InterfaceSkeleton(
 
 	return (
 		<div
-			ref={ useCallback( mergeRefs( [ ref, fallbackRef ] ), [
-				ref,
-				fallbackRef,
-			] ) }
+			ref={ useMergeRefs( [ ref, fallbackRef ] ) }
 			className={ classnames(
 				className,
 				'interface-interface-skeleton',