Updated to account for facebook/react/pull/14906/commits/cdd9ba4

src/backend/ReactDebugHooks.js

@@ -225,8 +225,8 @@ type ReactCurrentDispatcher = {
 };
 
 type HooksNode = {
-  index: number,
-  isEditable: boolean,
+  id: number | null,
+  isStateEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,
@@ -368,7 +368,7 @@ function buildTree(rootStack, readHookLog): HooksTree {
   const rootChildren = [];
   let prevStack = null;
   let levelChildren = rootChildren;
-  let index = 0;
+  let nativeHookID = 0;
   const stackOfChildren = [];
   for (let i = 0; i < readHookLog.length; i++) {
     const hook = readHookLog[i];
@@ -402,8 +402,8 @@ function buildTree(rootStack, readHookLog): HooksTree {
         levelChildren.push({
           name: parseCustomHookName(stack[j - 1].functionName),
           value: undefined,
-          index: -1,
-          isEditable: false,
+          id: null,
+          isStateEditable: false,
           subHooks: children,
         });
         stackOfChildren.push(levelChildren);
@@ -412,9 +412,20 @@ function buildTree(rootStack, readHookLog): HooksTree {
       prevStack = stack;
     }
     const { primitive } = hook;
+
+    // For now, the "id" of stateful hooks is just the stateful hook index.
+    // Custom hooks have no ids, nor do non-stateful native hooks (e.g. Context, DebugValue).
+    const id =
+      primitive === 'Context' || primitive === 'DebugValue'
+        ? null
+        : nativeHookID++;
+
+    // For the time being, only State and Reducer hooks support runtime overrides.
+    const isStateEditable = primitive === 'Reducer' || primitive === 'State';
+
     levelChildren.push({
-      index: primitive === 'DebugValue' ? -1 : index++,
-      isEditable: primitive === 'Reducer' || primitive === 'State',
+      id,
+      isStateEditable,
       name: primitive,
       value: hook.value,
       subHooks: [],

src/backend/agent.js

@@ -25,7 +25,7 @@ type InspectSelectParams = {|
 
 type OverrideHookParams = {|
   id: number,
-  index: number,
+  hookID: number,
   path: Array<string | number>,
   rendererID: number,
   value: any,
@@ -134,7 +134,7 @@ export default class Agent extends EventEmitter {
 
   overrideHookState = ({
     id,
-    index,
+    hookID,
     path,
     rendererID,
     value,
@@ -143,7 +143,7 @@ export default class Agent extends EventEmitter {
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}" for element "${id}"`);
     } else {
-      renderer.setInHook(id, index, path, value);
+      renderer.setInHook(id, hookID, path, value);
     }
   };
 

src/backend/types.js

@@ -100,8 +100,8 @@ export type DevToolsHook = {
 };
 
 export type HooksNode = {
-  index: number,
-  isEditable: boolean,
+  id: number,
+  isStateEditable: boolean,
   name: string,
   value: mixed,
   subHooks: Array<HooksNode>,

src/devtools/views/HooksTree.js

@@ -70,7 +70,7 @@ type HookViewProps = {|
 |};
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
-  const { name, index, isEditable, subHooks, value } = hook;
+  const { name, id: hookID, isStateEditable, subHooks, value } = hook;
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
@@ -141,12 +141,12 @@ function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   } else {
     let overrideValueFn = null;
     // TODO Maybe read editable value from debug hook?
-    if (canEditHooks && isEditable) {
+    if (canEditHooks && isStateEditable) {
       overrideValueFn = (path: Array<string | number>, value: any) => {
         const rendererID = store.getRendererIDForElement(id);
         bridge.send('overrideHookState', {
           id,
-          index,
+          hookID,
           path,
           rendererID,
           value,

src/devtools/views/utils.js

@@ -70,8 +70,8 @@ export function serializeHooksForCopy(hooks: HooksTree | null): string {
     const current = queue.pop();
 
     // These aren't meaningful
-    delete current.isEditable;
-    delete current.index;
+    delete current.id;
+    delete current.isStateEditable;
 
     if (current.subHooks.length > 0) {
       queue.push(...current.subHooks);