[SearchBar] Improve rendering performance #119189

Dosant · 2021-11-19T15:51:07Z

Summary

This pr is set of small UI performance improvements for our SearchBar component.
This is the result of my space time where I explored different react performance improvements techniques. doc

Some of the changes:

To avoid redundant re-renders:
- Wrap component in React.memo (or use PureComponent) where it makes sense. For example, we don't need to re-run a render cycle on <FilterBar/> when user types into QueryInput
- Avoid calling setState and changing the object ref when it is not needed to avoid re-rendering
- Wrap handlers into useCallback or move them as class method to get a stable reference
- Wrap some values into useMemo to get a stable reference
Fix slow rendering:
- Split large components into smaller once to utilize memoization (e.g. see<SharingMetaFields />)
- Avoid reading layout values from DOM elements during render. (see layout thrashing). For this had to refactor position tracking for suggestions.

Improve event handlers performance:
- Debounce event handlers: wrap some of event handlers into requestAnimationFrame scheduler. This is especially beneficial for those that read layout values from DOM elements. (e.g. scrollIntoView in <SuggestionsComponent/>)

Risk Matrix

Risk	Probability	Severity	Mitigation/Notes
Bugs with suggestions positioning due to refactor	Mid	Mid	Suggestions are used as part of a top search bar, but also, for example, in visualize app when configuring `filters` aggregation.
Query history regressions	Low	Low	This was moved around a bit and this could have cause bugs where query history isn't updated accordingly
Time history regression	Low	Low	This was moved around a bit and this could have cause bugs

How I tested performance

Manually playing with search bar and suggestions. Used 6x slowdown, javascript profiler to find slow functions and excessive layout trashing and react dev tools profiler for finding redundant renders.
Functional test that compared total React rendering time before vs after.

For my sample test results are: before ~150ms, after ~70ms.
I used react profiler API to sum up rendering time: https://reactjs.org/docs/profiler.html
And my sample test was typing the query using typeahead:

Sample test

  await queryBar.setQuery('extension.raw');
  await PageObjects.common.sleep(500);
  await testSubjects.click('autocompleteSuggestion-field-extension.raw-');
  await PageObjects.common.sleep(500);
  await testSubjects.click('autocompleteSuggestion-operator-:-');
  await PageObjects.common.sleep(500);
  await testSubjects.click('autocompleteSuggestion-value-jpg-');
  await PageObjects.common.sleep(500);
  await testSubjects.click('autocompleteSuggestion-conjunction-and-');
  await PageObjects.common.sleep(500);
  await queryBar.typeQuery('mach');
  await PageObjects.common.sleep(500);
  await testSubjects.click('autocompleteSuggestion-field-machine.os.raw-');
  await PageObjects.common.sleep(500);
  await testSubjects.click('autocompleteSuggestion-operator-:-');
  await PageObjects.common.sleep(500);
  await testSubjects.click('autocompleteSuggestion-value-osx-');
  await PageObjects.common.sleep(500);
  await queryBar.clickQuerySubmitButton();

Dosant · 2021-11-23T14:47:41Z

@elasticmachine merge upstream

…timize-search-bar-react-rendering

Dosant · 2021-12-07T12:53:48Z

package.json

@@ -286,7 +286,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",


Updating because now it has clear() method

Dosant · 2021-12-07T12:54:18Z

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

+import { shallowEqual } from '../../utils/shallow_equal';
+
+const SuperDatePicker = React.memo(
+  EuiSuperDatePicker as any


Couldn't find a way to avoid any here

Dosant · 2021-12-07T12:57:37Z

src/plugins/data/public/ui/typeahead/suggestions_component.tsx

+  );
+});
+
+function useDimensions(


This is used for positioning suggestions component relative to the input field. Previously it was scattered between parent and child, now it is centralized inside a child.

This allowed to avoid trigger parent's re-rendering on page resizes and avoid reduce dimensions reading that cause layout trashing

src/plugins/data/public/utils/shallow_equal.ts

Dosant · 2021-12-07T18:19:51Z

@elasticmachine merge upstream

…ring

elasticmachine · 2021-12-08T09:40:18Z

Pinging @elastic/kibana-app-services (Team:AppServicesUx)

Dosant · 2021-12-09T11:08:44Z

@elasticmachine merge upstream

…ring

…timize-search-bar-react-rendering # Conflicts: # src/plugins/data/public/ui/query_string_input/query_string_input.tsx

…thub.com:Dosant/kibana into d/2021-11-15-optimize-search-bar-react-rendering

jloleysens · 2021-12-15T15:53:34Z

@elasticmachine merge upstream

…ring

jloleysens

Great work @Dosant ! I tested locally and with react profiler I observed fewer peaks in re-renders as I was interacting with the search bar and suggestions 👏🏻

I left a few ideas on how we could improve some minor points.

jloleysens · 2021-12-16T10:12:28Z

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

-      }
+    }
+
+    if (document.activeElement !== null && document.activeElement.id === this.textareaId) {


Suggested change

if (document.activeElement !== null && document.activeElement.id === this.textareaId) {

if (document.activeElement?.id === this.textareaId) {

IMO this reads a lot easier, probably has a negligible performance overhead. I'll leave it up to you :)

I agree that is easier to read, but logically this is a bit different. undefined === undefined case is different.
I'd leave it as is, because need to review this logical case first to make this change

jloleysens · 2021-12-16T10:39:00Z

src/plugins/data/public/ui/typeahead/suggestions_component.tsx

+    window.addEventListener('scroll', handler, { passive: true, capture: true });
+
+    const resizeObserver =
+      typeof window.ResizeObserver !== 'undefined' &&


I think we can go without this check as it looks fairly supported in major browsers https://caniuse.com/resizeobserver.

Agree that support is pretty good, but I was actually deciding between:

A. Using it only when available because this isn't critical functionality (so if it is not available, everything is still working, but with some position bugs)
B. Using resize-observer-polyfill like we do in other places. But I wanted to avoid including couple more Kbs into this async chunk for this - https://bundlephobia.com/package/resize-observer-polyfill@1.5.1
C. Using it directly assuming it always exists. I didn't go with it because it wasn't necessary to introduce this breaking change. As it might break someone who is using Kibana on some TV platform or older Safari without a good need for it. But since we are actually using it in some places directly, I created: #121509 to address this separately

jloleysens · 2021-12-16T10:40:04Z

src/plugins/data/public/ui/typeahead/suggestions_component.tsx

+
+    return () => {
+      window.removeEventListener('scroll', handler, { capture: true });
+      if (resizeObserver) resizeObserver.disconnect();


Suggested change

if (resizeObserver) resizeObserver.disconnect();

resizeObserver?.disconnect();

Or just resizeObserver.disconnect(); if we remove the conditional

It is currently written so that resizeObserver is false | ResizeObserver so this doesn't work

src/plugins/data/public/utils/shallow_equal.ts

Dosant · 2021-12-17T11:27:49Z

@elasticmachine merge upstream

…ring

…timize-search-bar-react-rendering # Conflicts: # src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx # src/plugins/data/public/ui/search_bar/search_bar.tsx

Dosant · 2021-12-23T15:09:30Z

@elasticmachine merge upstream

…ring

Dosant · 2021-12-30T14:23:00Z

@elasticmachine merge upstream

…ring

Dosant · 2022-01-04T10:42:20Z

@elasticmachine merge upstream

…ring

lukasolson

Tested, functionality seems to be working properly.

lukasolson · 2021-12-17T21:21:57Z

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

+
+        if (
+          (newSelectionStart !== null && this.inputRef?.selectionStart !== newSelectionStart) ||
+          (newSelectionEnd !== null && this.inputRef?.selectionEnd !== newSelectionEnd)


When can newSelectionStart be null? And is this a case that should actually still be calling setState?

Also, should we add these same checks above for query?

When can newSelectionStart be null? And is this a case that should actually still be calling setState?

Don't remember why I put it, I re-checeked and indeed doesn't seem necessary. Removed

Also, should we add these same checks above for query?

There is important check regarding the query inside onQueryStringChange

Just a note: I didn't try to put equal checks before setState everywhere, I was looking at render profile and added this checks why I saw it makes an impact

…timize-search-bar-react-rendering

Dosant · 2022-01-05T14:14:55Z

@elasticmachine merge upstream

…ring

Dosant · 2022-01-06T10:37:09Z

@elasticmachine merge upstream

…ring

kibana-ci · 2022-01-06T11:58:55Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`data`	508	517	+9

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`data`	2943	2944	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`canvas`	1010.9KB	1011.1KB	+182.0B
`data`	101.5KB	108.3KB	+6.8KB
`dataViewEditor`	115.1KB	115.3KB	+182.0B
`expressions`	43.9KB	44.1KB	+182.0B
`lens`	1020.9KB	1021.1KB	+182.0B
`ml`	3.5MB	3.5MB	+182.0B
`timelines`	225.0KB	225.2KB	+182.0B
total			+7.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`data`	444.8KB	445.0KB	+165.0B
`kbnUiSharedDeps-npmDll`	6.1MB	6.1MB	+336.0B
`securitySolution`	243.9KB	244.0KB	+182.0B
total			+683.0B

Unknown metric groups

API count

id	before	after	diff
`data`	3340	3341	+1

History

💚 Build #15904 succeeded 245aa56
💔 Build #15868 failed 72e05ef
💚 Build #15635 succeeded f109074
💚 Build #15436 succeeded 13420aa
💚 Build #15012 succeeded 632aa5b
💚 Build #14193 succeeded e5e04bc

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

improve

4f0ee14

Dosant force-pushed the d/2021-11-15-optimize-search-bar-react-rendering branch from 7944f9c to 4f0ee14 Compare December 6, 2021 16:57

Dosant added 3 commits December 6, 2021 18:14

remove unused imports

588407c

fix tests

3b8e2bc

Merge branch 'main' of github.com:elastic/kibana into d/2021-11-15-op…

3927791

…timize-search-bar-react-rendering

Dosant changed the title ~~optimize search bar react rendering~~ [SearchBar] Improve rendering performance Dec 7, 2021

Dosant commented Dec 7, 2021

View reviewed changes

Dosant added 4 commits December 7, 2021 15:38

fix query history

447ae0d

fix time history

5508677

capture scroll event

4f8b47c

fix tests

c78f56e

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

67aca4e

…ring

Dosant added Feature:Query Bar Querying and query bar features release_note:skip Skip the PR/issue when compiling release notes Team:AppServicesUx v8.1.0 labels Dec 8, 2021

Dosant marked this pull request as ready for review December 8, 2021 09:40

Dosant requested a review from a team as a code owner December 8, 2021 09:40

kibanamachine and others added 3 commits December 9, 2021 06:08

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

b677e64

…ring

Merge branch 'main' of github.com:elastic/kibana into d/2021-11-15-op…

588abba

…timize-search-bar-react-rendering # Conflicts: # src/plugins/data/public/ui/query_string_input/query_string_input.tsx

Merge branch 'd/2021-11-15-optimize-search-bar-react-rendering' of gi…

02ff1d7

…thub.com:Dosant/kibana into d/2021-11-15-optimize-search-bar-react-rendering

Dosant requested review from jloleysens and lukasolson December 13, 2021 16:41

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

49a48f6

…ring

jloleysens approved these changes Dec 16, 2021

View reviewed changes

kibanamachine and others added 3 commits December 17, 2021 06:27

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

92712b4

…ring

improve shallow-equal copy

a7d4964

Merge branch 'main' of github.com:elastic/kibana into d/2021-11-15-op…

e5e04bc

…timize-search-bar-react-rendering # Conflicts: # src/plugins/data/public/ui/query_string_input/query_bar_top_row.tsx # src/plugins/data/public/ui/search_bar/search_bar.tsx

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

632aa5b

…ring

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

13420aa

…ring

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

f109074

…ring

lukasolson approved these changes Jan 4, 2022

View reviewed changes

Dosant added 2 commits January 5, 2022 11:52

Merge branch 'main' of github.com:elastic/kibana into d/2021-11-15-op…

0e07ea6

…timize-search-bar-react-rendering

remove redundant null checks

72e05ef

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

245aa56

…ring

Merge branch 'main' into d/2021-11-15-optimize-search-bar-react-rende…

1f4cdc2

…ring

Dosant merged commit 00d1ad3 into elastic:main Jan 6, 2022

kibanamachine added the backport:skip This commit does not require backporting label Jan 6, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SearchBar] Improve rendering performance #119189

[SearchBar] Improve rendering performance #119189

Dosant commented Nov 19, 2021 •

edited

Loading

Dosant commented Nov 23, 2021

Dosant Dec 7, 2021

Dosant Dec 7, 2021

Dosant Dec 7, 2021 •

edited

Loading

Dosant commented Dec 7, 2021

elasticmachine commented Dec 8, 2021

Dosant commented Dec 9, 2021

jloleysens commented Dec 15, 2021

jloleysens left a comment

jloleysens Dec 16, 2021

jloleysens Dec 16, 2021

Dosant Dec 17, 2021

jloleysens Dec 16, 2021

Dosant Dec 17, 2021

jloleysens Dec 16, 2021

Dosant Dec 17, 2021

Dosant commented Dec 17, 2021

Dosant commented Dec 23, 2021

Dosant commented Dec 30, 2021

Dosant commented Jan 4, 2022

lukasolson left a comment

lukasolson Dec 17, 2021

lukasolson Dec 17, 2021

Dosant Jan 5, 2022 •

edited

Loading

Dosant commented Jan 5, 2022

Dosant commented Jan 6, 2022

kibana-ci commented Jan 6, 2022

API count

	if (document.activeElement !== null && document.activeElement.id === this.textareaId) {
	if (document.activeElement?.id === this.textareaId) {

	if (resizeObserver) resizeObserver.disconnect();
	resizeObserver?.disconnect();

[SearchBar] Improve rendering performance #119189

[SearchBar] Improve rendering performance #119189

Conversation

Dosant commented Nov 19, 2021 • edited Loading

Summary

Risk Matrix

How I tested performance

Dosant commented Nov 23, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dosant Dec 7, 2021 • edited Loading

Choose a reason for hiding this comment

Dosant commented Dec 7, 2021

elasticmachine commented Dec 8, 2021

Dosant commented Dec 9, 2021

jloleysens commented Dec 15, 2021

jloleysens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dosant commented Dec 17, 2021

Dosant commented Dec 23, 2021

Dosant commented Dec 30, 2021

Dosant commented Jan 4, 2022

lukasolson left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Dosant Jan 5, 2022 • edited Loading

Choose a reason for hiding this comment

Dosant commented Jan 5, 2022

Dosant commented Jan 6, 2022

kibana-ci commented Jan 6, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

Dosant commented Nov 19, 2021 •

edited

Loading

Dosant Dec 7, 2021 •

edited

Loading

Dosant Jan 5, 2022 •

edited

Loading