[SearchBar] Improve rendering performance

package.json

@@ -287,7 +287,7 @@
     "markdown-it": "^10.0.0",
     "md5": "^2.1.0",
     "mdast-util-to-hast": "10.0.1",
-    "memoize-one": "^5.0.0",
+    "memoize-one": "^6.0.0",
     "mime": "^2.4.4",
     "mime-types": "^2.1.27",
     "mini-css-extract-plugin": "1.1.0",
@@ -585,7 +585,6 @@
     "@types/lz-string": "^1.3.34",
     "@types/markdown-it": "^0.0.7",
     "@types/md5": "^2.2.0",
-    "@types/memoize-one": "^4.1.0",
     "@types/mime": "^2.0.1",
     "@types/mime-types": "^2.1.0",
     "@types/minimatch": "^2.0.29",

src/plugins/data/public/query/timefilter/time_history.ts

@@ -42,6 +42,10 @@ export class TimeHistory {
   get() {
     return this.history.get();
   }
+
+  get$() {
+    return this.history.get$();
+  }
 }
 
 export type TimeHistoryContract = PublicMethodsOf<TimeHistory>;

src/plugins/data/public/query/timefilter/timefilter_service.mock.ts

@@ -9,6 +9,7 @@
 import type { PublicMethodsOf } from '@kbn/utility-types';
 import { TimefilterService, TimeHistoryContract, TimefilterContract } from '.';
 import { Observable } from 'rxjs';
+import { TimeRange } from '../../../common';
 
 export type TimefilterServiceClientContract = PublicMethodsOf<TimefilterService>;
 
@@ -43,6 +44,7 @@ const createSetupContractMock = () => {
   const historyMock: jest.Mocked<TimeHistoryContract> = {
     add: jest.fn(),
     get: jest.fn(),
+    get$: jest.fn(() => new Observable<TimeRange[]>()),
   };
 
   const setupContract = {

src/plugins/data/public/ui/filter_bar/filter_bar.tsx

@@ -40,7 +40,7 @@ interface Props {
   timeRangeForSuggestionsOverride?: boolean;
 }
 
-function FilterBarUI(props: Props) {
+const FilterBarUI = React.memo(function FilterBarUI(props: Props) {
   const groupRef = useRef<HTMLDivElement>(null);
   const [isAddFilterPopoverOpen, setIsAddFilterPopoverOpen] = useState(false);
   const kibana = useKibana<IDataPluginServices>();
@@ -226,6 +226,6 @@ function FilterBarUI(props: Props) {
       </EuiFlexItem>
     </EuiFlexGroup>
   );
-}
+});
 
 export const FilterBar = injectI18n(FilterBarUI);

src/plugins/data/public/ui/query_string_input/language_switcher.tsx

@@ -32,7 +32,7 @@ export interface QueryLanguageSwitcherProps {
   nonKqlModeHelpText?: string;
 }
 
-export function QueryLanguageSwitcher({
+export const QueryLanguageSwitcher = React.memo(function QueryLanguageSwitcher({
   language,
   anchorPosition,
   onSelectLanguage,
@@ -148,4 +148,4 @@ export function QueryLanguageSwitcher({
       </div>
     </EuiPopover>
   );
-}
+});

src/plugins/data/public/ui/query_string_input/query_bar_top_row.test.tsx

@@ -11,9 +11,9 @@ import { mockPersistedLogFactory } from './query_string_input.test.mocks';
 import React from 'react';
 import { mount } from 'enzyme';
 import { render } from '@testing-library/react';
+import { EMPTY } from 'rxjs';
 
 import QueryBarTopRow from './query_bar_top_row';
-
 import { coreMock } from '../../../../../core/public/mocks';
 import { dataPluginMock } from '../../mocks';
 import { KibanaContextProvider } from 'src/plugins/kibana_react/public';
@@ -26,6 +26,7 @@ const mockTimeHistory = {
   get: () => {
     return [];
   },
+  get$: () => EMPTY,
 };
 
 startMock.uiSettings.get.mockImplementation((key: string) => {