InspectedElementHooksTree() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementHooksTree.js lines 44–113

export function InspectedElementHooksTree({
  bridge,
  element,
  hookNames,
  inspectedElement,
  parseHookNames,
  store,
  toggleParseHookNames,
}: HooksTreeViewProps): React.Node {
  const {hooks, id} = inspectedElement;

  // Changing parseHookNames is done in a transition, because it suspends.
  // This value is done outside of the transition, so the UI toggle feels responsive.
  const [parseHookNamesOptimistic, setParseHookNamesOptimistic] =
    useState(parseHookNames);
  const handleChange = () => {
    setParseHookNamesOptimistic(!parseHookNames);
    toggleParseHookNames();
  };

  const hookNamesModuleLoader = useContext(HookNamesModuleLoaderContext);

  const hookParsingFailed = parseHookNames && hookNames === null;

  let toggleTitle;
  if (hookParsingFailed) {
    toggleTitle = 'Hook parsing failed';
  } else if (parseHookNames) {
    toggleTitle = 'Parsing hook names ...';
  } else {
    toggleTitle = 'Parse hook names (may be slow)';
  }

  const handleCopy = () => copy(serializeHooksForCopy(hooks));

  if (hooks === null) {
    return null;
  } else {
    return (
      <div data-testname="InspectedElementHooksTree">
        <div className={styles.HeaderRow}>
          <div className={styles.Header}>hooks</div>
          {typeof hookNamesModuleLoader === 'function' &&
            (!parseHookNames || hookParsingFailed) && (
              <Toggle
                className={hookParsingFailed ? styles.ToggleError : null}
                isChecked={parseHookNamesOptimistic}
                isDisabled={parseHookNamesOptimistic || hookParsingFailed}
                onChange={handleChange}
                testName="LoadHookNamesButton"
                title={toggleTitle}>
                <ButtonIcon type="parse-hook-names" />
              </Toggle>
            )}
          <Button onClick={handleCopy} title="Copy to clipboard">
            <ButtonIcon type="copy" />
          </Button>
        </div>
        <InnerHooksTreeView
          hookNames={hookNames}
          hooks={hooks}
          id={id}
          element={element}
          inspectedElement={inspectedElement}
          path={[]}
        />
      </div>
    );
  }
}