Identify native hook index (for DevTools editable hooks)

Author: Brian Vaughn

packages/react-debug-tools/src/ReactDebugHooks.js

@@ -373,6 +373,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
   let rootChildren = [];
   let prevStack = null;
   let levelChildren = rootChildren;
+  let nativeHookIndex = 0;
   let stackOfChildren = [];
   for (let i = 0; i < readHookLog.length; i++) {
     let hook = readHookLog[i];
@@ -403,6 +404,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
       for (let j = stack.length - commonSteps - 1; j >= 1; j--) {
         let children = [];
         levelChildren.push({
+          nativeHookIndex: -1,
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
           subHooks: children,
@@ -413,6 +415,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
       prevStack = stack;
     }
     levelChildren.push({
+      nativeHookIndex: hook.primitive === 'DebugValue' ? -1 : nativeHookIndex++,
       name: hook.primitive,
       value: hook.value,
       subHooks: [],

packages/react-debug-tools/src/__tests__/ReactHooksInspection-test.js

@@ -28,6 +28,7 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        nativeHookIndex: 0,
         name: 'State',
         value: 'hello world',
         subHooks: [],
@@ -48,10 +49,12 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        nativeHookIndex: -1,
         name: 'Custom',
         value: __DEV__ ? 'custom hook label' : undefined,
         subHooks: [
           {
+            nativeHookIndex: 0,
             name: 'State',
             value: 'hello world',
             subHooks: [],
@@ -80,31 +83,37 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        nativeHookIndex: -1,
         name: 'Custom',
         value: undefined,
         subHooks: [
           {
+            nativeHookIndex: 0,
             name: 'State',
             subHooks: [],
             value: 'hello',
           },
           {
+            nativeHookIndex: 1,
             name: 'Effect',
             subHooks: [],
             value: effect,
           },
         ],
       },
       {
+        nativeHookIndex: -1,
         name: 'Custom',
         value: undefined,
         subHooks: [
           {
+            nativeHookIndex: 2,
             name: 'State',
             value: 'world',
             subHooks: [],
           },
           {
+            nativeHookIndex: 3,
             name: 'Effect',
             value: effect,
             subHooks: [],
@@ -143,50 +152,60 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        nativeHookIndex: -1,
         name: 'Bar',
         value: undefined,
         subHooks: [
           {
+            nativeHookIndex: -1,
             name: 'Custom',
             value: undefined,
             subHooks: [
               {
+                nativeHookIndex: 0,
                 name: 'Reducer',
                 value: 'hello',
                 subHooks: [],
               },
               {
+                nativeHookIndex: 1,
                 name: 'Effect',
                 value: effect,
                 subHooks: [],
               },
             ],
           },
           {
+            nativeHookIndex: 2,
             name: 'LayoutEffect',
             value: effect,
             subHooks: [],
           },
         ],
       },
       {
+        nativeHookIndex: -1,
         name: 'Baz',
         value: undefined,
         subHooks: [
           {
+            nativeHookIndex: 3,
             name: 'LayoutEffect',
             value: effect,
             subHooks: [],
           },
           {
+            nativeHookIndex: -1,
             name: 'Custom',
             subHooks: [
               {
+                nativeHookIndex: 4,
                 name: 'Reducer',
                 subHooks: [],
                 value: 'world',
               },
               {
+                nativeHookIndex: 5,
                 name: 'Effect',
                 subHooks: [],
                 value: effect,
@@ -208,6 +227,7 @@ describe('ReactHooksInspection', () => {
     let tree = ReactDebugTools.inspectHooks(Foo, {});
     expect(tree).toEqual([
       {
+        nativeHookIndex: 0,
         name: 'Context',
         value: 'default',
         subHooks: [],
@@ -270,9 +290,12 @@ describe('ReactHooksInspection', () => {
       let tree = ReactDebugTools.inspectHooks(Foo, {});
       expect(tree).toEqual([
         {
+          nativeHookIndex: -1,
           name: 'Custom',
           value: __DEV__ ? 'bar:123' : undefined,
-          subHooks: [{name: 'State', subHooks: [], value: 0}],
+          subHooks: [
+            {nativeHookIndex: 0, name: 'State', subHooks: [], value: 0},
+          ],
         },
       ]);
     });