DataViews: prevent unnecessary re-renders (#57452)

WordPress · Dec 29, 2023 · af8c530 · af8c530 · github-actions · Dec 29, 2023
1 parent b85da47
commit af8c530
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git a/packages/dataviews/src/filters.js b/packages/dataviews/src/filters.js
@@ -1,3 +1,8 @@
+/**
+ * WordPress dependencies
+ */
+import { memo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -21,7 +26,7 @@ const sanitizeOperators = ( field ) => {
 	);
 };
 
-export default function Filters( { fields, view, onChangeView } ) {
+const Filters = memo( function Filters( { fields, view, onChangeView } ) {
 	const filters = [];
 	fields.forEach( ( field ) => {
 		if ( ! field.type ) {
@@ -88,4 +93,6 @@ export default function Filters( { fields, view, onChangeView } ) {
 	}
 
 	return filterComponents;
-}
+} );
+
+export default Filters;
diff --git a/packages/dataviews/src/search.js b/packages/dataviews/src/search.js
@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useEffect, useRef } from '@wordpress/element';
+import { useEffect, useRef, memo } from '@wordpress/element';
 import { SearchControl } from '@wordpress/components';
 import { useDebouncedInput } from '@wordpress/compose';
 
-export default function Search( { label, view, onChangeView } ) {
+const Search = memo( function Search( { label, view, onChangeView } ) {
 	const [ search, setSearch, debouncedSearch ] = useDebouncedInput(
 		view.search
 	);
@@ -35,4 +35,6 @@ export default function Search( { label, view, onChangeView } ) {
 			size="compact"
 		/>
 	);
-}
+} );
+
+export default Search;
diff --git a/packages/dataviews/src/view-actions.js b/packages/dataviews/src/view-actions.js
@@ -6,6 +6,7 @@ import {
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { memo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -239,7 +240,7 @@ function SortMenu( { fields, view, onChangeView } ) {
 	);
 }
 
-export default function ViewActions( {
+const ViewActions = memo( function ViewActions( {
 	fields,
 	view,
 	onChangeView,
@@ -282,4 +283,6 @@ export default function ViewActions( {
 			</DropdownMenuGroup>
 		</DropdownMenu>
 	);
-}
+} );
+
+export default ViewActions;