Merge branch 'fix-nested-hooks' of https://github.com/gaearon/react-devtools-experimental into gaearon-fix-nested-hooks

shells/dev/app/InspectableElements/CustomHooks.js

@@ -32,6 +32,13 @@ function useCustomObject() {
   return useState(123);
 }
 
+function useVeryDeeplyNestedHook(i) {
+  useDebugValue(i);
+  if (i > 0) {
+    useVeryDeeplyNestedHook(i - 1);
+  }
+}
+
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   const [count, updateCount] = useState(0);
 
@@ -53,6 +60,9 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   // Tests nested custom hooks
   useNestedOuterHook();
 
+  // Verify deep nesting doesn't break
+  useVeryDeeplyNestedHook(50);
+
   return <button onClick={onClick}>Count: {debouncedCount}</button>;
 }
 const MemoWithHooks = memo(FunctionWithHooks);

shells/dev/app/InspectableElements/NestedProps.js

@@ -23,6 +23,29 @@ export default function ObjectProps() {
       array={['first', 'second', 'third']}
       objectInArray={[object]}
       arrayInObject={{ array: ['first', 'second', 'third'] }}
+      deepObject={{
+        // Known limitation: we won't go deeper than several levels.
+        // In the future, we might offer a way to request deeper access on demand.
+        a: {
+          b: {
+            c: {
+              d: {
+                e: {
+                  f: {
+                    g: {
+                      h: {
+                        i: {
+                          j: 10,
+                        },
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      }}
     />
   );
 }

src/devtools/views/Components/HooksTree.js

@@ -9,6 +9,7 @@ import EditableValue from './EditableValue';
 import KeyValue from './KeyValue';
 import { serializeHooksForCopy } from '../utils';
 import styles from './HooksTree.css';
+import { meta } from '../../../hydration';
 
 import type { HooksNode, HooksTree } from 'src/backend/types';
 
@@ -71,6 +72,11 @@ type HookViewProps = {|
 
 function HookView({ canEditHooks, hook, id, path = [] }: HookViewProps) {
   const { name, id: hookID, isStateEditable, subHooks, value } = hook;
+  if (hook.hasOwnProperty(meta.inspected)) {
+    // This Hook is too deep and hasn't been hydrated.
+    // TODO: show UI to load its data.
+    return null;
+  }
 
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);