Split select in getFieldsList hook

packages/block-editor/src/hooks/block-bindings.js

@@ -34,8 +34,6 @@ import { store as blockEditorStore } from '../store';
 
 const { DropdownMenuV2 } = unlock( componentsPrivateApis );
 
-const EMPTY_OBJECT = {};
-
 const useToolsPanelDropdownMenuProps = () => {
 	const isMobile = useViewportMatch( 'medium', '<' );
 	return ! isMobile
@@ -192,15 +190,28 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 	const bindableAttributes = getBindableAttributes( blockName );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
-	// `useSelect` is used purposely here to ensure `getFieldsList`
-	// is updated whenever there are updates in block context.
-	// `source.getFieldsList` may also call a selector via `select`.
-	const _fieldsList = {};
-	const { fieldsList, canUpdateBlockBindings } = useSelect(
+	const { canUpdateBlockBindings } = useSelect( ( select ) => {
+		return {
+			canUpdateBlockBindings:
+				select( blockEditorStore ).getSettings().canUpdateBlockBindings,
+		};
+	}, [] );
+
+	/**
+	 * Create new selector for fieldsList to avoid unnecessary re-renders.
+	 * See: https://github.com/WordPress/gutenberg/pull/64072#discussion_r1764693730
+	 *
+	 * `useSelect` is used purposely here to ensure `getFieldsList` is updated
+	 * whenever there are updates in block context.
+	 * `source.getFieldsList` may also call a selector via `registry.select`.
+	 */
+	const fieldsList = useSelect(
 		( select ) => {
 			if ( ! bindableAttributes || bindableAttributes.length === 0 ) {
-				return EMPTY_OBJECT;
+				return;
 			}
+			const _fieldsList = {};
+			const { getBlockBindingsSources } = unlock( blocksPrivateApis );
 			const registeredSources = getBlockBindingsSources();
 			Object.entries( registeredSources ).forEach(
 				( [ sourceName, { getFieldsList, usesContext } ] ) => {
@@ -223,15 +234,9 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 					}
 				}
 			);
-			return {
-				fieldsList:
-					Object.values( _fieldsList ).length > 0
-						? _fieldsList
-						: EMPTY_OBJECT,
-				canUpdateBlockBindings:
-					select( blockEditorStore ).getSettings()
-						.canUpdateBlockBindings,
-			};
+			return (
+				Object.values( _fieldsList ).length > 0 && { ..._fieldsList }
+			);
 		},
 		[ blockContext, bindableAttributes ]
 	);
@@ -253,7 +258,7 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => {
 
 	// Lock the UI when the user can't update bindings or there are no fields to connect to.
 	const readOnly =
-		! canUpdateBlockBindings || ! Object.keys( fieldsList ).length;
+		! canUpdateBlockBindings || ! Object.keys( fieldsList || {} ).length;
 
 	if ( readOnly && Object.keys( filteredBindings ).length === 0 ) {
 		return null;