getHookNameFromNode() — react Function Reference

Architecture documentation for the getHookNameFromNode() function in astUtils.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ getHookNameFromNode() — react Function Reference

Dependency Diagram

graph TD
  4b550904_a2c6_c391_cba6_f44de349ba07["getHookNameFromNode()"]
  22acaf1d_d624_cc04_9046_5e8603f3a58d["astUtils.js"]
  4b550904_a2c6_c391_cba6_f44de349ba07 -->|defined in| 22acaf1d_d624_cc04_9046_5e8603f3a58d
  ae74fc61_22de_3ac9_6314_d002de1a11ab["getHookName()"]
  ae74fc61_22de_3ac9_6314_d002de1a11ab -->|calls| 4b550904_a2c6_c391_cba6_f44de349ba07
  75a8dada_c873_7ef4_b1b4_f06aa03e35cb["getHookVariableName()"]
  4b550904_a2c6_c391_cba6_f44de349ba07 -->|calls| 75a8dada_c873_7ef4_b1b4_f06aa03e35cb
  style 4b550904_a2c6_c391_cba6_f44de349ba07 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/hooks/astUtils.js lines 207–282

function getHookNameFromNode(
  originalHook: HooksNode,
  nodesAssociatedWithReactHookASTNode: NodePath[],
  potentialReactHookASTNode: NodePath,
): string | null {
  let hookVariableName: string | null;
  const isCustomHook = originalHook.id === null;

  switch (nodesAssociatedWithReactHookASTNode.length) {
    case 1:
      // CASE 1A (nodesAssociatedWithReactHookASTNode[0] !== potentialReactHookASTNode):
      // const flagState = useState(true); -> later referenced as
      // const [flag, setFlag] = flagState;
      //
      // CASE 1B (nodesAssociatedWithReactHookASTNode[0] === potentialReactHookASTNode):
      // const [flag, setFlag] = useState(true); -> we have access to the hook variable straight away
      //
      // CASE 1C (isCustomHook && nodesAssociatedWithReactHookASTNode[0] === potentialReactHookASTNode):
      // const someVariable = useSomeCustomHook(); -> we have access to hook variable straight away
      // const [someVariable, someFunction] = useAnotherCustomHook(); -> we ignore variable names in this case
      //                                                                 as it is unclear what variable name to show
      if (
        isCustomHook &&
        nodesAssociatedWithReactHookASTNode[0] === potentialReactHookASTNode
      ) {
        hookVariableName = getHookVariableName(
          potentialReactHookASTNode,
          isCustomHook,
        );
        break;
      }
      hookVariableName = getHookVariableName(
        nodesAssociatedWithReactHookASTNode[0],
      );
      break;

    case 2:
      // const flagState = useState(true); -> later referenced as
      // const flag = flagState[0];
      // const setFlag = flagState[1];
      nodesAssociatedWithReactHookASTNode =
        nodesAssociatedWithReactHookASTNode.filter(hookPath =>
          filterMemberWithHookVariableName(hookPath),
        );

      if (nodesAssociatedWithReactHookASTNode.length !== 1) {
        // Something went wrong, only a single desirable hook should remain here
        throw new Error("Couldn't isolate AST Node containing hook variable.");
      }
      hookVariableName = getHookVariableName(
        nodesAssociatedWithReactHookASTNode[0],
      );
      break;

    default:
      // Case 0:
      // const flagState = useState(true); -> which is not accessed anywhere
      //
      // Case > 2 (fallback):
      // const someState = React.useState(() => 0)
      //
      // const stateVariable = someState[0]
      // const setStateVariable = someState[1]
      //
      // const [number2, setNumber2] = someState
      //
      // We assign the state variable for 'someState' to multiple variables,
      // and hence cannot isolate a unique variable name. In such cases,
      // default to showing 'someState'

      hookVariableName = getHookVariableName(potentialReactHookASTNode);
      break;
  }

  return hookVariableName;
}