HookView() — react Function Reference

Architecture documentation for the HookView() function in InspectedElementHooksTree.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ HookView() — react Function Reference

Dependency Diagram

graph TD
  7a040d30_21c4_61b5_6a0f_8d734b1ff7cc["HookView()"]
  5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3["InspectedElementHooksTree.js"]
  7a040d30_21c4_61b5_6a0f_8d734b1ff7cc -->|defined in| 5a9f89d7_52b7_04f5_ab3d_8ec03c9054e3
  style 7a040d30_21c4_61b5_6a0f_8d734b1ff7cc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js lines 154–390

function HookView({
  element,
  hook,
  hookNames,
  id,
  inspectedElement,
  path,
}: HookViewProps) {
  const {canEditHooks, canEditHooksAndDeletePaths, canEditHooksAndRenamePaths} =
    inspectedElement;
  const {id: hookID, isStateEditable, subHooks, value} = hook;

  const isReadOnly = hookID == null || !isStateEditable;

  const canDeletePaths = !isReadOnly && canEditHooksAndDeletePaths;
  const canEditValues = !isReadOnly && canEditHooks;
  const canRenamePaths = !isReadOnly && canEditHooksAndRenamePaths;

  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);

  const [isOpen, setIsOpen] = useState<boolean>(false);

  const toggleIsOpen = useCallback(
    () => setIsOpen(prevIsOpen => !prevIsOpen),
    [],
  );

  if (hook.hasOwnProperty(meta.inspected)) {
    // This Hook is too deep and hasn't been hydrated.
    if (__DEV__) {
      console.warn('Unexpected dehydrated hook; this is a DevTools error.');
    }
    return (
      <div className={styles.Hook}>
        <div className={styles.NameValueRow}>
          <span className={styles.TruncationIndicator}>...</span>
        </div>
      </div>
    );
  }

  // Certain hooks are not editable at all (as identified by react-debug-tools).
  // Primitive hook names (e.g. the "State" name for useState) are also never editable.
  // $FlowFixMe[missing-local-annot]
  const canRenamePathsAtDepth = depth => isStateEditable && depth > 1;

  const isCustomHook = subHooks.length > 0;

  let name = hook.name;
  if (hookID !== null) {
    name = (
      <>
        <span className={styles.PrimitiveHookNumber}>{hookID + 1}</span>
        {name}
      </>
    );
  }

  const type = typeof value;

  let displayValue;
  let isComplexDisplayValue = false;

  const hookSource = hook.hookSource;
  const hookName =
    hookNames != null && hookSource != null
      ? hookNames.get(getHookSourceLocationKey(hookSource))
      : null;
  const hookDisplayName = hookName ? (
    <>
      {name}
      {
        // $FlowFixMe[constant-condition]
        !!hookName && <span className={styles.HookName}>({hookName})</span>
      }
    </>
  ) : (
    name
  );