Implemented Profiler onCommit() and onPostCommit() hooks

facebook · Feb 12, 2020 · 470e4ef · 470e4ef
1 parent f727803
commit 470e4ef
Show file tree

Hide file tree

Showing 6 changed files with 2,721 additions and 1,059 deletions.
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
@@ -815,13 +815,8 @@ function createFiberFromProfiler(
   key: null | string,
 ): Fiber {
   if (__DEV__) {
-    if (
-      typeof pendingProps.id !== 'string' ||
-      typeof pendingProps.onRender !== 'function'
-    ) {
-      console.error(
-        'Profiler must specify an "id" string and "onRender" function as props',
-      );
+    if (typeof pendingProps.id !== 'string') {
+      console.error('Profiler must specify an "id" as a prop');
     }
   }
 
@@ -831,6 +826,13 @@ function createFiberFromProfiler(
   fiber.type = REACT_PROFILER_TYPE;
   fiber.expirationTime = expirationTime;
 
+  if (enableProfilerTimer) {
+    fiber.stateNode = {
+      effectDuration: 0,
+      passiveEffectDuration: 0,
+    };
+  }
+
   return fiber;
 }
 

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -577,6 +577,12 @@ function updateProfiler(
 ) {
   if (enableProfilerTimer) {
     workInProgress.effectTag |= Update;
+
+    // Reset effect durations for the next eventual effect phase.
+    // These are reset during render to allow the DevTools commit hook a chance to read them,
+    const stateNode = workInProgress.stateNode;
+    stateNode.effectDuration = 0;
+    stateNode.passiveEffectDuration = 0;
   }
   const nextProps = workInProgress.pendingProps;
   const nextChildren = nextProps.children;
@@ -2974,6 +2980,12 @@ function beginWork(
             if (hasChildWork) {
               workInProgress.effectTag |= Update;
             }
+
+            // Reset effect durations for the next eventual effect phase.
+            // These are reset during render to allow the DevTools commit hook a chance to read them,
+            const stateNode = workInProgress.stateNode;
+            stateNode.effectDuration = 0;
+            stateNode.passiveEffectDuration = 0;
           }
           break;
         case SuspenseComponent: {