Data: Include more details when shallow equality fails in 'useSelect'

packages/data/src/components/use-select/index.js

@@ -19,6 +19,23 @@ import useAsyncMode from '../async-mode-provider/use-async-mode';
 
 const renderQueue = createQueue();
 
+function warnOnUnstableReference( a, b ) {
+	let keys = [];
+	if ( a.constructor === Object && b.constructor === Object ) {
+		keys = Object.keys( a ).filter( ( k ) => a[ k ] !== b[ k ] );
+	} else if ( Array.isArray( a ) && Array.isArray( b ) ) {
+		keys = [ ...a.keys() ].filter( ( i ) => a[ i ] !== b[ i ] );
+	}
+
+	// eslint-disable-next-line no-console
+	console.warn(
+		'The `useSelect` hook returns different values when called with the same state and parameters.\n' +
+			'This can lead to unnecessary re-renders and performance issues if not fixed.\n\n' +
+			'Non-equal value keys: %s\n\n',
+		keys.join( ', ' )
+	);
+}
+
 /**
  * @typedef {import('../../types').StoreDescriptor<C>} StoreDescriptor
  * @template {import('../../types').AnyConfig} C
@@ -159,10 +176,7 @@ function Store( registry, suspense ) {
 				if ( ! didWarnUnstableReference ) {
 					const secondMapResult = mapSelect( select, registry );
 					if ( ! isShallowEqual( mapResult, secondMapResult ) ) {
-						// eslint-disable-next-line no-console
-						console.warn(
-							`The 'useSelect' hook returns different values when called with the same state and parameters. This can lead to unnecessary rerenders.`
-						);
+						warnOnUnstableReference( mapResult, secondMapResult );
 						didWarnUnstableReference = true;
 					}
 				}