Re-added encoded string LRU cache

Author: Brian Vaughn

packages/react-devtools-shared/src/utils.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+import LRU from 'lru-cache';
 import {
   isElement,
   typeOf,
@@ -49,9 +50,16 @@ import {localStorageGetItem, localStorageSetItem} from './storage';
 import {meta} from './hydration';
 
 import type {ComponentFilter, ElementType} from './types';
+import type {LRUCache} from 'react-devtools-shared/src/types';
 
 const cachedDisplayNames: WeakMap<Function, string> = new WeakMap();
 
+// On large trees, encoding takes significant time.
+// Try to reuse the already encoded strings.
+const encodedStringCache: LRUCache<string, Array<number>> = new LRU({
+  max: 1000,
+});
+
 export function alphaSortKeys(
   a: string | number | Symbol,
   b: string | number | Symbol,
@@ -140,21 +148,27 @@ function surrogatePairToCodePoint(
 // Credit for this encoding approach goes to Tim Down:
 // https://stackoverflow.com/questions/4877326/how-can-i-tell-if-a-string-contains-multibyte-characters-in-javascript
 export function utfEncodeString(string: string): Array<number> {
-  const codePoints = [];
+  const cached = encodedStringCache.get(string);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const encoded = [];
   let i = 0;
   let charCode;
   while (i < string.length) {
     charCode = string.charCodeAt(i);
     if ((charCode & 0xf800) === 0xd800) {
-      codePoints.push(
-        surrogatePairToCodePoint(charCode, string.charCodeAt(++i)),
-      );
+      encoded.push(surrogatePairToCodePoint(charCode, string.charCodeAt(++i)));
     } else {
-      codePoints.push(charCode);
+      encoded.push(charCode);
     }
     ++i;
   }
-  return codePoints;
+
+  encodedStringCache.set(string, encoded);
+
+  return encoded;
 }
 
 export function printOperationsArray(operations: Array<number>) {