Mobile - Inserter - Fix useSelect warnings for SearchResults and Reus…

…ableBlocksTab (#53813)

* Mobile - SearchResults - Fix useSelect warning by extracting some logic from it to avoid unnecessary re-renders

* Mobile - ReusableBlocksTab - Fix useSelect warning by extracting filtering logic outside into a useMemo

packages/block-editor/src/components/inserter/reusable-blocks-tab.native.js

@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,18 +13,22 @@ import { store as blockEditorStore } from '../../store';
 import { createInserterSection, filterInserterItems } from './utils';
 
 function ReusableBlocksTab( { onSelect, rootClientId, listProps } ) {
-	const { items } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
 			const { getInserterItems } = select( blockEditorStore );
 			const allItems = getInserterItems( rootClientId );
 
 			return {
-				items: filterInserterItems( allItems, { onlyReusable: true } ),
+				inserterItems: allItems,
 			};
 		},
 		[ rootClientId ]
 	);
 
+	const items = useMemo( () => {
+		return filterInserterItems( inserterItems, { onlyReusable: true } );
+	}, [ inserterItems ] );
+
 	const sections = [ createInserterSection( { key: 'reuseable', items } ) ];
 
 	return (

packages/block-editor/src/components/inserter/search-results.native.js

@@ -3,6 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -21,21 +22,24 @@ function InserterSearchResults( {
 	rootClientId,
 	isFullScreen,
 } ) {
-	const { blockTypes } = useSelect(
+	const { inserterItems } = useSelect(
 		( select ) => {
-			const allItems =
+			const items =
 				select( blockEditorStore ).getInserterItems( rootClientId );
 
-			const availableItems = filterInserterItems( allItems, {
-				allowReusable: true,
-			} );
-			const filteredItems = searchItems( availableItems, filterValue );
-
-			return { blockTypes: filteredItems };
+			return { inserterItems: items };
 		},
-		[ rootClientId, filterValue ]
+		[ rootClientId ]
 	);
 
+	const blockTypes = useMemo( () => {
+		const availableItems = filterInserterItems( inserterItems, {
+			allowReusable: true,
+		} );
+
+		return searchItems( availableItems, filterValue );
+	}, [ inserterItems, filterValue ] );
+
 	const { items, trackBlockTypeSelected } =
 		useBlockTypeImpressions( blockTypes );