Added truncation UI indicator for hooks. Addressed lint rule violations.

shells/dev/app/InspectableElements/CustomHooks.js

@@ -32,11 +32,28 @@ function useCustomObject() {
   return useState(123);
 }
 
-function useVeryDeeplyNestedHook(i) {
-  useDebugValue(i);
-  if (i > 0) {
-    useVeryDeeplyNestedHook(i - 1);
-  }
+function useDeepHookA() {
+  useDebugValue('useDeepHookA');
+  useDeepHookB();
+}
+function useDeepHookB() {
+  useDebugValue('useDeepHookB');
+  useDeepHookC();
+}
+function useDeepHookC() {
+  useDebugValue('useDeepHookC');
+  useDeepHookD();
+}
+function useDeepHookD() {
+  useDebugValue('useDeepHookD');
+  useDeepHookE();
+}
+function useDeepHookE() {
+  useDebugValue('useDeepHookE');
+  useDeepHookF();
+}
+function useDeepHookF() {
+  useDebugValue('useDeepHookF');
 }
 
 function FunctionWithHooks(props: any, ref: React$Ref<any>) {
@@ -61,7 +78,7 @@ function FunctionWithHooks(props: any, ref: React$Ref<any>) {
   useNestedOuterHook();
 
   // Verify deep nesting doesn't break
-  useVeryDeeplyNestedHook(50);
+  useDeepHookA();
 
   return <button onClick={onClick}>Count: {debouncedCount}</button>;
 }

src/devtools/views/Components/HooksTree.css

@@ -46,3 +46,7 @@
   color: var(--color-dimmer);
   font-style: italic;
 }
+
+.TruncationIndicator {
+  color: var(--color-dimmer);
+}

src/devtools/views/Components/HooksTree.js

@@ -72,15 +72,22 @@ 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);
 
+  if (hook.hasOwnProperty(meta.inspected)) {
+    // This Hook is too deep and hasn't been hydrated.
+    // TODO: show UI to load its data.
+    return (
+      <div className={styles.Hook}>
+        <div className={styles.NameValueRow}>
+          <span className={styles.TruncationIndicator}>...</span>
+        </div>
+      </div>
+    );
+  }
+
   // TODO Add click and key handlers for toggling element open/close state.
 
   const isCustomHook = subHooks.length > 0;