getFilteredHookASTNodes() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ getFilteredHookASTNodes() — react Function Reference

Dependency Diagram

graph TD
  8f20542e_3cd7_577b_d616_7755284e5d75["getFilteredHookASTNodes()"]
  22acaf1d_d624_cc04_9046_5e8603f3a58d["astUtils.js"]
  8f20542e_3cd7_577b_d616_7755284e5d75 -->|defined in| 22acaf1d_d624_cc04_9046_5e8603f3a58d
  ae74fc61_22de_3ac9_6314_d002de1a11ab["getHookName()"]
  ae74fc61_22de_3ac9_6314_d002de1a11ab -->|calls| 8f20542e_3cd7_577b_d616_7755284e5d75
  f6deeb57_f62f_467f_fc8e_73ff4e2df353["nodeContainsHookVariableName()"]
  8f20542e_3cd7_577b_d616_7755284e5d75 -->|calls| f6deeb57_f62f_467f_fc8e_73ff4e2df353
  style 8f20542e_3cd7_577b_d616_7755284e5d75 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/hooks/astUtils.js lines 101–128

function getFilteredHookASTNodes(
  potentialReactHookASTNode: NodePath,
  potentialHooksFound: Array<NodePath>,
  source: string,
): Array<NodePath> {
  let nodesAssociatedWithReactHookASTNode: NodePath[] = [];
  if (nodeContainsHookVariableName(potentialReactHookASTNode)) {
    // made custom hooks to enter this, always
    // Case 1.
    // Directly usable Node -> const ref = useRef(null);
    //                      -> const [tick, setTick] = useState(1);
    // Case 2.
    // Custom Hooks -> const someVariable = useSomeCustomHook();
    //              -> const [someVariable, someFunction] = useAnotherCustomHook();
    nodesAssociatedWithReactHookASTNode.unshift(potentialReactHookASTNode);
  } else {
    // Case 3.
    // Indirectly usable Node -> const tickState = useState(1);
    //                           [tick, setTick] = tickState;
    //                        -> const tickState = useState(1);
    //                           const tick = tickState[0];
    //                           const setTick = tickState[1];
    nodesAssociatedWithReactHookASTNode = potentialHooksFound.filter(hookNode =>
      filterMemberNodesOfTargetHook(potentialReactHookASTNode, hookNode),
    );
  }
  return nodesAssociatedWithReactHookASTNode;
}