avoid fill() overhead

facebook · Oct 14, 2022 · 08f75b1 · 08f75b1
1 parent d4469c1
commit 08f75b1
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 18 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -879,12 +879,10 @@ function useMemoCache(size: number): Array<any> {
 
   let data = memoCache.data[memoCache.index];
   if (data === undefined) {
-    data = memoCache.data[memoCache.index] = new Array(size).fill(
-      MEMO_CACHE_UNSET_SENTINEL,
-    );
-    // Attach sentinel to the array, eventually we can make the sentinel a public
-    // export from React and avoid modifying the array
-    (data: any)._ = MEMO_CACHE_UNSET_SENTINEL;
+    data = memoCache.data[memoCache.index] = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = MEMO_CACHE_UNSET_SENTINEL;
+    }
   } else if (data.length !== size) {
     // TODO: consider warning or throwing here
     if (__DEV__) {

diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -879,12 +879,10 @@ function useMemoCache(size: number): Array<any> {
 
   let data = memoCache.data[memoCache.index];
   if (data === undefined) {
-    data = memoCache.data[memoCache.index] = new Array(size).fill(
-      MEMO_CACHE_UNSET_SENTINEL,
-    );
-    // Attach sentinel to the array, eventually we can make the sentinel a public
-    // export from React and avoid modifying the array
-    (data: any)._ = MEMO_CACHE_UNSET_SENTINEL;
+    data = memoCache.data[memoCache.index] = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = MEMO_CACHE_UNSET_SENTINEL;
+    }
   } else if (data.length !== size) {
     // TODO: consider warning or throwing here
     if (__DEV__) {

diff --git a/packages/react-reconciler/src/__tests__/useMemoCache-test.js b/packages/react-reconciler/src/__tests__/useMemoCache-test.js
@@ -46,8 +46,7 @@ describe('useMemoCache()', () => {
       const cache = useMemoCache(1);
       expect(Array.isArray(cache)).toBe(true);
       expect(cache.length).toBe(1);
-      expect(cache[0]).toBe(cache._);
-      expect(typeof cache._).toBe('symbol');
+      expect(cache[0]).toBe(Symbol.for('react.usememocache_sentinel'));
       return 'Ok';
     }
     const root = ReactNoop.createRoot();

diff --git a/packages/react-server/src/ReactFizzHooks.js b/packages/react-server/src/ReactFizzHooks.js
@@ -675,8 +675,10 @@ const MEMO_CACHE_UNSET_SENTINEL: symbol = Symbol.for(
   'react.usememocache_sentinel',
 );
 function useMemoCache(size: number): Array<any> {
-  const data = new Array(size).fill(MEMO_CACHE_UNSET_SENTINEL);
-  (data: any)._ = MEMO_CACHE_UNSET_SENTINEL;
+  const data = new Array(size);
+  for (let i = 0; i < size; i++) {
+    data[i] = MEMO_CACHE_UNSET_SENTINEL;
+  }
   return data;
 }
 

diff --git a/packages/react-server/src/ReactFlightHooks.js b/packages/react-server/src/ReactFlightHooks.js
@@ -107,8 +107,10 @@ export const Dispatcher: DispatcherType = {
     return unsupportedRefresh;
   },
   useMemoCache(size: number): Array<any> {
-    const data = new Array(size).fill(MEMO_CACHE_UNSET_SENTINEL);
-    (data: any)._ = MEMO_CACHE_UNSET_SENTINEL;
+    const data = new Array(size);
+    for (let i = 0; i < size; i++) {
+      data[i] = MEMO_CACHE_UNSET_SENTINEL;
+    }
     return data;
   },
   use: enableUseHook ? use : (unsupportedHook: any),