New hook: useInstanceId

packages/components/src/checkbox-control/index.js

@@ -1,15 +1,16 @@
 /**
  * WordPress dependencies
  */
-import { withInstanceId } from '@wordpress/compose';
+import { useInstanceId } from '@wordpress/compose';
 
 /**
  * Internal dependencies
  */
 import BaseControl from '../base-control';
 import Dashicon from '../dashicon';
 
-function CheckboxControl( { label, className, heading, checked, help, instanceId, onChange, ...props } ) {
+export default function CheckboxControl( { label, className, heading, checked, help, onChange, ...props } ) {
+	const instanceId = useInstanceId();
 	const id = `inspector-checkbox-control-${ instanceId }`;
 	const onChangeValue = ( event ) => onChange( event.target.checked );
 
@@ -34,5 +35,3 @@ function CheckboxControl( { label, className, heading, checked, help, instanceId
 		</BaseControl>
 	);
 }
-
-export default withInstanceId( CheckboxControl );

packages/compose/README.md

@@ -119,6 +119,10 @@ _Returns_
 
 -   `WPComponent`: Component class with generated display name assigned.
 
+<a name="useInstanceId" href="#useInstanceId">#</a> **useInstanceId**
+
+Provides a unique instance ID.
+
 <a name="useMediaQuery" href="#useMediaQuery">#</a> **useMediaQuery**
 
 Runs a media query and returns its value when it changes.

packages/compose/src/hooks/use-instance-id/index.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { useMemo, useEffect } from '@wordpress/element';
+
+/**
+ * Array to keep track of allocated ids.
+ */
+const allocatedIds = [];
+
+/**
+ * Find an unallocated id.
+ */
+function findId() {
+	let id = allocatedIds.findIndex( ( allocated ) => ! allocated );
+
+	if ( id === -1 ) {
+		id = allocatedIds.length;
+	}
+
+	// Allocated the id.
+	allocatedIds[ id ] = true;
+
+	return id;
+}
+
+/**
+ * Free an allocated id.
+ *
+ * @param {number} id Id to free.
+ */
+function freeId( id ) {
+	delete allocatedIds[ id ];
+}
+
+/**
+ * Provides a unique instance ID.
+ */
+export default function useInstanceId() {
+	// Take advantage of useMemo to get the same id throughout the life of a
+	// component.
+	const id = useMemo( findId, [] );
+	// Free up the id when the comonent unmounts. This must depend on `id` since
+	// useMemo is not guaranteed to return the same id throughout the life of
+	// the component.
+	useEffect( () => () => freeId( id ), [ id ] );
+	return id;
+}

packages/compose/src/hooks/use-instance-id/test/index.js

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import { create, act } from 'react-test-renderer';
+
+/**
+ * Internal dependencies
+ */
+import useInstanceId from '../';
+
+describe( 'useInstanceId', () => {
+	const TestComponent = () => {
+		return useInstanceId();
+	};
+
+	it( 'should manage ids', async () => {
+		let test0;
+
+		await act( async () => {
+			test0 = create( <TestComponent /> );
+		} );
+
+		expect( test0.toJSON() ).toBe( '0' );
+
+		let test1;
+
+		await act( async () => {
+			test1 = create( <TestComponent /> );
+		} );
+
+		expect( test1.toJSON() ).toBe( '1' );
+
+		test0.unmount();
+
+		let test2;
+
+		await act( async () => {
+			test2 = create( <TestComponent /> );
+		} );
+
+		expect( test2.toJSON() ).toBe( '0' );
+
+		let test3;
+
+		await act( async () => {
+			test3 = create( <TestComponent /> );
+		} );
+
+		expect( test3.toJSON() ).toBe( '2' );
+
+		test1.unmount();
+		test2.unmount();
+	} );
+} );

packages/compose/src/index.js

@@ -16,3 +16,4 @@ export { default as withState } from './higher-order/with-state';
 export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
 export { default as useViewportMatch } from './hooks/use-viewport-match';
+export { default as useInstanceId } from './hooks/use-instance-id';