Added performance timings to DevTools named hooks parsing (#22173)

Author: Brian Vaughn

packages/react-devtools-extensions/src/astUtils.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+import {__PERFORMANCE_PROFILE__} from 'react-devtools-shared/src/constants';
 import traverse, {NodePath, Node} from '@babel/traverse';
 import {File} from '@babel/types';
 
@@ -27,6 +28,15 @@ export type SourceFileASTWithHookDetails = {
 
 export const NO_HOOK_NAME = '<no-hook>';
 
+function mark(markName: string): void {
+  performance.mark(markName + '-start');
+}
+
+function measure(markName: string): void {
+  performance.mark(markName + '-end');
+  performance.measure(markName, markName + '-start', markName + '-end');
+}
+
 const AST_NODE_TYPES = Object.freeze({
   PROGRAM: 'Program',
   CALL_EXPRESSION: 'CallExpression',
@@ -131,7 +141,13 @@ export function getHookName(
   originalSourceLineNumber: number,
   originalSourceColumnNumber: number,
 ): string | null {
+  if (__PERFORMANCE_PROFILE__) {
+    mark('getPotentialHookDeclarationsFromAST(originalSourceAST)');
+  }
   const hooksFromAST = getPotentialHookDeclarationsFromAST(originalSourceAST);
+  if (__PERFORMANCE_PROFILE__) {
+    measure('getPotentialHookDeclarationsFromAST(originalSourceAST)');
+  }
 
   let potentialReactHookASTNode = null;
   if (originalSourceColumnNumber === 0) {
@@ -144,6 +160,7 @@ export function getHookName(
         node,
         originalSourceLineNumber,
       );
+
       const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
       return nodeLocationCheck && hookDeclaractionCheck;
     });
@@ -158,6 +175,7 @@ export function getHookName(
         originalSourceLineNumber,
         originalSourceColumnNumber,
       );
+
       const hookDeclaractionCheck = isConfirmedHookDeclaration(node);
       return nodeLocationCheck && hookDeclaractionCheck;
     });
@@ -170,17 +188,31 @@ export function getHookName(
   // nodesAssociatedWithReactHookASTNode could directly be used to obtain the hook variable name
   // depending on the type of potentialReactHookASTNode
   try {
+    if (__PERFORMANCE_PROFILE__) {
+      mark('getFilteredHookASTNodes()');
+    }
     const nodesAssociatedWithReactHookASTNode = getFilteredHookASTNodes(
       potentialReactHookASTNode,
       hooksFromAST,
       originalSourceCode,
     );
+    if (__PERFORMANCE_PROFILE__) {
+      measure('getFilteredHookASTNodes()');
+    }
 
-    return getHookNameFromNode(
+    if (__PERFORMANCE_PROFILE__) {
+      mark('getHookNameFromNode()');
+    }
+    const name = getHookNameFromNode(
       hook,
       nodesAssociatedWithReactHookASTNode,
       potentialReactHookASTNode,
     );
+    if (__PERFORMANCE_PROFILE__) {
+      measure('getHookNameFromNode()');
+    }
+
+    return name;
   } catch (error) {
     console.error(error);
     return null;
@@ -283,13 +315,19 @@ function getHookVariableName(
 
 function getPotentialHookDeclarationsFromAST(sourceAST: File): NodePath[] {
   const potentialHooksFound: NodePath[] = [];
+  if (__PERFORMANCE_PROFILE__) {
+    mark('traverse(sourceAST)');
+  }
   traverse(sourceAST, {
     enter(path) {
       if (path.isVariableDeclarator() && isPotentialHookDeclaration(path)) {
         potentialHooksFound.push(path);
       }
     },
   });
+  if (__PERFORMANCE_PROFILE__) {
+    measure('traverse(sourceAST)');
+  }
   return potentialHooksFound;
 }