Cache RegExp match results to avoid re-running during pan and zoom

Author: Brian Vaughn

packages/react-devtools-timeline/src/content-views/ComponentMeasuresView.js

@@ -40,6 +40,8 @@ import {BORDER_SIZE, COLORS, NATIVE_EVENT_HEIGHT} from './constants';
 const ROW_WITH_BORDER_HEIGHT = NATIVE_EVENT_HEIGHT + BORDER_SIZE;
 
 export class ComponentMeasuresView extends View {
+  _cachedSearchMatches: Map<string, boolean>;
+  _cachedSearchRegExp: RegExp | null = null;
   _hoveredComponentMeasure: ReactComponentMeasure | null = null;
   _intrinsicSize: IntrinsicSize;
   _profilerData: ReactProfilerData;
@@ -58,6 +60,9 @@ export class ComponentMeasuresView extends View {
     this._profilerData = profilerData;
     this._viewState = viewState;
 
+    this._cachedSearchMatches = new Map();
+    this._cachedSearchRegExp = null;
+
     viewState.onSearchRegExpStateChange(() => {
       this.setNeedsDisplay();
     });
@@ -166,11 +171,20 @@ export class ComponentMeasuresView extends View {
       }
     }
 
-    const searchRegExp = this._viewState.searchRegExp;
-    const isSearchMatch =
-      searchRegExp !== null &&
-      componentMeasure.componentName.match(searchRegExp);
-    if (isSearchMatch) {
+    let isMatch = false;
+    const cachedSearchRegExp = this._cachedSearchRegExp;
+    if (cachedSearchRegExp !== null) {
+      const cachedSearchMatches = this._cachedSearchMatches;
+      const cachedValue = cachedSearchMatches.get(componentName);
+      if (cachedValue != null) {
+        isMatch = cachedValue;
+      } else {
+        isMatch = componentName.match(cachedSearchRegExp) !== null;
+        cachedSearchMatches.set(componentName, isMatch);
+      }
+    }
+
+    if (isMatch) {
       context.fillStyle = COLORS.SEARCH_RESULT_FILL;
     }
 
@@ -198,6 +212,12 @@ export class ComponentMeasuresView extends View {
       visibleArea,
     } = this;
 
+    const searchRegExp = this._viewState.searchRegExp;
+    if (this._cachedSearchRegExp !== searchRegExp) {
+      this._cachedSearchMatches = new Map();
+      this._cachedSearchRegExp = searchRegExp;
+    }
+
     context.fillStyle = COLORS.BACKGROUND;
     context.fillRect(
       visibleArea.origin.x,