collectRecommendations() — react Function Reference

Architecture documentation for the collectRecommendations() function in ExhaustiveDeps.ts from the react codebase.

Function typescript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ collectRecommendations() — react Function Reference

Dependency Diagram

graph TD
  433729aa_5315_6737_eded_ebac4cce3d75["collectRecommendations()"]
  ea02b01a_dd46_4b35_fe00_775aec496668["ExhaustiveDeps.ts"]
  433729aa_5315_6737_eded_ebac4cce3d75 -->|defined in| ea02b01a_dd46_4b35_fe00_775aec496668
  c0937ffe_5980_6959_3af6_e18a4a23114f["rule.create()"]
  c0937ffe_5980_6959_3af6_e18a4a23114f -->|calls| 433729aa_5315_6737_eded_ebac4cce3d75
  style 433729aa_5315_6737_eded_ebac4cce3d75 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/eslint-plugin-react-hooks/src/rules/ExhaustiveDeps.ts lines 1535–1710

function collectRecommendations({
  dependencies,
  declaredDependencies,
  stableDependencies,
  externalDependencies,
  isEffect,
}: {
  dependencies: Map<string, Dependency>;
  declaredDependencies: Array<DeclaredDependency>;
  stableDependencies: Set<string>;
  externalDependencies: Set<string>;
  isEffect: boolean;
}) {
  // Our primary data structure.
  // It is a logical representation of property chains:
  // `props` -> `props.foo` -> `props.foo.bar` -> `props.foo.bar.baz`
  //         -> `props.lol`
  //         -> `props.huh` -> `props.huh.okay`
  //         -> `props.wow`
  // We'll use it to mark nodes that are *used* by the programmer,
  // and the nodes that were *declared* as deps. Then we will
  // traverse it to learn which deps are missing or unnecessary.
  const depTree = createDepTree();
  function createDepTree(): DependencyTreeNode {
    return {
      isUsed: false, // True if used in code
      isSatisfiedRecursively: false, // True if specified in deps
      isSubtreeUsed: false, // True if something deeper is used by code
      children: new Map(), // Nodes for properties
    };
  }

  // Mark all required nodes first.
  // Imagine exclamation marks next to each used deep property.
  dependencies.forEach((_, key) => {
    const node = getOrCreateNodeByPath(depTree, key);
    node.isUsed = true;
    markAllParentsByPath(depTree, key, parent => {
      parent.isSubtreeUsed = true;
    });
  });

  // Mark all satisfied nodes.
  // Imagine checkmarks next to each declared dependency.
  declaredDependencies.forEach(({key}) => {
    const node = getOrCreateNodeByPath(depTree, key);
    node.isSatisfiedRecursively = true;
  });
  stableDependencies.forEach(key => {
    const node = getOrCreateNodeByPath(depTree, key);
    node.isSatisfiedRecursively = true;
  });

  // Tree manipulation helpers.
  function getOrCreateNodeByPath(
    rootNode: DependencyTreeNode,
    path: string,
  ): DependencyTreeNode {
    const keys = path.split('.');
    let node = rootNode;
    for (const key of keys) {
      let child = node.children.get(key);
      if (!child) {
        child = createDepTree();
        node.children.set(key, child);
      }
      node = child;
    }
    return node;
  }
  function markAllParentsByPath(
    rootNode: DependencyTreeNode,
    path: string,
    fn: (node: DependencyTreeNode) => void,
  ): void {
    const keys = path.split('.');
    let node = rootNode;
    for (const key of keys) {
      const child = node.children.get(key);
      if (!child) {
        return;