Memoize SearchResults (#35851)

public/app/features/search/components/SearchResults.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, memo } from 'react';
 import { css } from '@emotion/css';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -22,15 +22,8 @@ export interface Props {
 
 const { section: sectionLabel, items: itemsLabel } = selectors.components.Search;
 
-export const SearchResults: FC<Props> = ({
-  editable,
-  loading,
-  onTagSelected,
-  onToggleChecked,
-  onToggleSection,
-  results,
-  layout,
-}) => {
+export const SearchResults: FC<Props> = memo(
+  ({ editable, loading, onTagSelected, onToggleChecked, onToggleSection, results, layout }) => {
     const theme = useTheme();
     const styles = getSectionStyles(theme);
     const itemProps = { editable, onToggleChecked, onTagSelected };
@@ -97,7 +90,10 @@ export const SearchResults: FC<Props> = ({
         {layout === SearchLayout.Folders ? renderFolders() : renderDashboards()}
       </div>
     );
-};
+  }
+);
+
+SearchResults.displayName = 'SearchResults';
 
 const getSectionStyles = stylesFactory((theme: GrafanaTheme) => {
   const { md } = theme.spacing;

public/app/features/search/hooks/useManageDashboards.ts

@@ -1,4 +1,4 @@
-import { useMemo, useReducer } from 'react';
+import { useCallback, useMemo, useReducer } from 'react';
 import { FolderDTO } from 'app/types';
 import { contextSrv } from 'app/core/services/context_srv';
 import { DashboardQuery, DashboardSection, OnDeleteItems, OnMoveItems, OnToggleChecked } from '../types';
@@ -23,9 +23,12 @@ export const useManageDashboards = (
     dispatch,
   } = useSearch<ManageDashboardsState>(query, reducer, {});
 
-  const onToggleChecked: OnToggleChecked = (item) => {
+  const onToggleChecked: OnToggleChecked = useCallback(
+    (item) => {
       dispatch({ type: TOGGLE_CHECKED, payload: item });
-  };
+    },
+    [dispatch]
+  );
 
   const onToggleAllChecked = () => {
     dispatch({ type: TOGGLE_ALL_CHECKED });

public/app/features/search/hooks/useSearch.ts

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDebounce } from 'react-use';
 import { SearchSrv } from 'app/core/services/search_srv';
 import { backendSrv } from 'app/core/services/backend_srv';
@@ -35,7 +35,8 @@ export const useSearch: UseSearch = (query, reducer, params = {}) => {
 
   useDebounce(search, 300, [query, queryParsing]);
 
-  const onToggleSection = (section: DashboardSection) => {
+  const onToggleSection = useCallback(
+    (section: DashboardSection) => {
       if (hasId(section.title) && !section.items.length) {
         dispatch({ type: FETCH_ITEMS_START, payload: section.id });
         backendSrv.search({ folderIds: [section.id] }).then((items) => {
@@ -45,7 +46,9 @@ export const useSearch: UseSearch = (query, reducer, params = {}) => {
       } else {
         dispatch({ type: TOGGLE_SECTION, payload: section });
       }
-  };
+    },
+    [dispatch]
+  );
 
   return { state, dispatch, onToggleSection };
 };

public/app/features/search/hooks/useSearchQuery.ts

@@ -1,4 +1,4 @@
-import { FormEvent, useReducer } from 'react';
+import { FormEvent, useCallback, useReducer } from 'react';
 import { debounce } from 'lodash';
 import { SelectableValue } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
@@ -32,10 +32,13 @@ export const useSearchQuery = (defaults: Partial<DashboardQuery>) => {
     updateLocation({ tag: tags });
   };
 
-  const onTagAdd = (tag: string) => {
+  const onTagAdd = useCallback(
+    (tag: string) => {
       dispatch({ type: ADD_TAG, payload: tag });
       updateLocation({ tag: [...query.tag, tag] });
-  };
+    },
+    [query.tag]
+  );
 
   const onClearFilters = () => {
     dispatch({ type: CLEAR_FILTERS });