isPotentialHookDeclaration() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ isPotentialHookDeclaration() — react Function Reference

Dependency Diagram

graph TD
  380887ba_dbe4_1ba6_7743_9a77aad37654["isPotentialHookDeclaration()"]
  22acaf1d_d624_cc04_9046_5e8603f3a58d["astUtils.js"]
  380887ba_dbe4_1ba6_7743_9a77aad37654 -->|defined in| 22acaf1d_d624_cc04_9046_5e8603f3a58d
  1fcb15c0_e9b6_04cb_5be9_a3f60ec9471d["getPotentialHookDeclarationsFromAST()"]
  1fcb15c0_e9b6_04cb_5be9_a3f60ec9471d -->|calls| 380887ba_dbe4_1ba6_7743_9a77aad37654
  ba0d9569_23b0_9c1a_d1d4_ec900c053397["isHook()"]
  380887ba_dbe4_1ba6_7743_9a77aad37654 -->|calls| ba0d9569_23b0_9c1a_d1d4_ec900c053397
  style 380887ba_dbe4_1ba6_7743_9a77aad37654 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/hooks/astUtils.js lines 554–585

function isPotentialHookDeclaration(path: NodePath): boolean {
  // The array potentialHooksFound will contain all potential hook declaration cases we support
  const nodePathInit = path.node.init;
  if (nodePathInit != null) {
    if (nodePathInit.type === AST_NODE_TYPES.CALL_EXPRESSION) {
      // CASE: CallExpression
      // 1. const [count, setCount] = useState(0); -> destructured pattern
      // 2. const [A, setA] = useState(0), const [B, setB] = useState(0); -> multiple inline declarations
      // 3. const [
      //      count,
      //      setCount
      //    ] = useState(0); -> multiline hook declaration
      // 4. const ref = useRef(null); -> generic hooks
      const callee = nodePathInit.callee;
      return isHook(callee);
    } else if (
      nodePathInit.type === AST_NODE_TYPES.MEMBER_EXPRESSION ||
      nodePathInit.type === AST_NODE_TYPES.IDENTIFIER
    ) {
      // CASE: MemberExpression
      //    const countState = React.useState(0);
      //    const count = countState[0];
      //    const setCount = countState[1]; -> Accessing members following hook declaration

      // CASE: Identifier
      //    const countState = React.useState(0);
      //    const [count, setCount] = countState; ->  destructuring syntax following hook declaration
      return true;
    }
  }
  return false;
}