@agilebot/eslint-plugin 0.1.1

package/lib/rules/react/better-exhaustive-deps.js

@@ -0,0 +1,1935 @@
+/* eslint-disable no-case-declarations */
+/* eslint-disable no-continue */
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'verifies the list of dependencies for Hooks like useEffect and similar',
+      recommended: true,
+      url: 'https://github.com/facebook/react/issues/14920'
+    },
+    fixable: 'code',
+    hasSuggestions: true,
+    schema: [
+      {
+        type: 'object',
+        additionalProperties: false,
+        enableDangerousAutofixThisMayCauseInfiniteLoops: false,
+        properties: {
+          additionalHooks: {
+            type: 'string'
+          },
+          enableDangerousAutofixThisMayCauseInfiniteLoops: {
+            type: 'boolean'
+          },
+          staticHooks: {
+            type: 'object',
+            additionalProperties: {
+              oneOf: [
+                {
+                  type: 'boolean'
+                },
+                {
+                  type: 'array',
+                  items: {
+                    type: 'boolean'
+                  }
+                },
+                {
+                  type: 'object',
+                  additionalProperties: {
+                    type: 'boolean'
+                  }
+                }
+              ]
+            }
+          },
+          checkMemoizedVariableIsStatic: {
+            type: 'boolean'
+          }
+        }
+      }
+    ]
+  },
+  create(context) {
+    // Parse the `additionalHooks` regex.
+    const additionalHooks =
+      context.options &&
+      context.options[0] &&
+      context.options[0].additionalHooks
+        ? new RegExp(context.options[0].additionalHooks)
+        : undefined;
+
+    const enableDangerousAutofixThisMayCauseInfiniteLoops =
+      (context.options &&
+        context.options[0] &&
+        context.options[0].enableDangerousAutofixThisMayCauseInfiniteLoops) ||
+      false;
+
+    // Parse the `staticHooks` object.
+    const staticHooks =
+      (context.options &&
+        context.options[0] &&
+        context.options[0].staticHooks) ||
+      {};
+
+    const checkMemoizedVariableIsStatic =
+      (context.options &&
+        context.options[0] &&
+        context.options[0].checkMemoizedVariableIsStatic) ||
+      false;
+
+    const options = {
+      additionalHooks,
+      enableDangerousAutofixThisMayCauseInfiniteLoops,
+      staticHooks,
+      checkMemoizedVariableIsStatic
+    };
+
+    function reportProblem(problem) {
+      if (enableDangerousAutofixThisMayCauseInfiniteLoops) {
+        // Used to enable legacy behavior. Dangerous.
+        // Keep this as an option until major IDEs upgrade (including VSCode FB ESLint extension).
+        if (Array.isArray(problem.suggest) && problem.suggest.length > 0) {
+          problem.fix = problem.suggest[0].fix;
+        }
+      }
+      context.report(problem);
+    }
+
+    const scopeManager = context.getSourceCode().scopeManager;
+
+    // Should be shared between visitors.
+    const setStateCallSites = new WeakMap();
+    const stateVariables = new WeakSet();
+    const stableKnownValueCache = new WeakMap();
+    const functionWithoutCapturedValueCache = new WeakMap();
+    function memoizeWithWeakMap(fn, map) {
+      return function (arg) {
+        if (map.has(arg)) {
+          // to verify cache hits:
+          // console.log(arg.name)
+          return map.get(arg);
+        }
+        const result = fn(arg);
+        map.set(arg, result);
+        return result;
+      };
+    }
+    /**
+     * Visitor for both function expressions and arrow function expressions.
+     */
+    function visitFunctionWithDependencies(
+      node,
+      declaredDependenciesNode,
+      reactiveHook,
+      reactiveHookName,
+      isEffect
+    ) {
+      if (isEffect && node.async) {
+        reportProblem({
+          node: node,
+          message:
+            `Effect callbacks are synchronous to prevent race conditions. ` +
+            `Put the async function inside:\n\n` +
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching'
+        });
+      }
+
+      // Get the current scope.
+      const scope = scopeManager.acquire(node);
+
+      // Find all our "pure scopes". On every re-render of a component these
+      // pure scopes may have changes to the variables declared within. So all
+      // variables used in our reactive hook callback but declared in a pure
+      // scope need to be listed as dependencies of our reactive hook callback.
+      //
+      // According to the rules of React you can't read a mutable value in pure
+      // scope. We can't enforce this in a lint so we trust that all variables
+      // declared outside of pure scope are indeed frozen.
+      const pureScopes = new Set();
+      let componentScope = null;
+      {
+        let currentScope = scope.upper;
+        while (currentScope) {
+          pureScopes.add(currentScope);
+          if (currentScope.type === 'function') {
+            break;
+          }
+          currentScope = currentScope.upper;
+        }
+        // If there is no parent function scope then there are no pure scopes.
+        // The ones we've collected so far are incorrect. So don't continue with
+        // the lint.
+        if (!currentScope) {
+          return;
+        }
+        componentScope = currentScope;
+      }
+
+      const isArray = Array.isArray;
+
+      // Remember such values. Avoid re-running extra checks on them.
+      const memoizedIsStableKnownHookValue = memoizeWithWeakMap(
+        isStableKnownHookValue,
+        stableKnownValueCache
+      );
+      const memoizedIsFunctionWithoutCapturedValues = memoizeWithWeakMap(
+        isFunctionWithoutCapturedValues,
+        functionWithoutCapturedValueCache
+      );
+
+      // Next we'll define a few helpers that helps us
+      // tell if some values don't have to be declared as deps.
+
+      // Some are known to be stable based on Hook calls.
+      // const [state, setState] = useState() / React.useState()
+      //               ^^^ true for this reference
+      // const [state, dispatch] = useReducer() / React.useReducer()
+      //               ^^^ true for this reference
+      // const ref = useRef()
+      //       ^^^ true for this reference
+      // False for everything else.
+      // True if the value is registered in staticHooks.
+      // True if the value is from useMemo() or useCallback() and has zero deps.
+      function isStableKnownHookValue(resolved) {
+        if (!isArray(resolved.defs)) {
+          return false;
+        }
+        const def = resolved.defs[0];
+        if (def == null) {
+          return false;
+        }
+        // Look for `let stuff = ...`
+        if (def.node.type !== 'VariableDeclarator') {
+          return false;
+        }
+        let init = def.node.init;
+        if (init == null) {
+          return false;
+        }
+        while (init.type === 'TSAsExpression') {
+          init = init.expression;
+        }
+        // Detect primitive constants
+        // const foo = 42
+        let declaration = def.node.parent;
+        if (declaration == null) {
+          // This might happen if variable is declared after the callback.
+          // In that case ESLint won't set up .parent refs.
+          // So we'll set them up manually.
+          fastFindReferenceWithParent(componentScope.block, def.node.id);
+          declaration = def.node.parent;
+          if (declaration == null) {
+            return false;
+          }
+        }
+        if (
+          declaration.kind === 'const' &&
+          init.type === 'Literal' &&
+          (typeof init.value === 'string' ||
+            typeof init.value === 'number' ||
+            init.value == null)
+        ) {
+          // Definitely stable
+          return true;
+        }
+        // Detect known Hook calls
+        // const [_, setState] = useState()
+        if (init.type !== 'CallExpression') {
+          return false;
+        }
+        let callee = init.callee;
+        // Step into `= React.something` initializer.
+        if (
+          callee.type === 'MemberExpression' &&
+          callee.object.name === 'React' &&
+          callee.property != null &&
+          !callee.computed
+        ) {
+          callee = callee.property;
+        }
+        if (callee.type !== 'Identifier') {
+          return false;
+        }
+        const id = def.node.id;
+        const { name } = callee;
+        if (name === 'useRef' && id.type === 'Identifier') {
+          // useRef() return value is stable.
+          return true;
+        } else if (name === 'useState' || name === 'useReducer') {
+          // Only consider second value in initializing tuple stable.
+          if (
+            id.type === 'ArrayPattern' &&
+            id.elements.length === 2 &&
+            isArray(resolved.identifiers)
+          ) {
+            // Is second tuple value the same reference we're checking?
+            if (id.elements[1] === resolved.identifiers[0]) {
+              if (name === 'useState') {
+                const references = resolved.references;
+                let writeCount = 0;
+                for (let i = 0; i < references.length; i++) {
+                  if (references[i].isWrite()) {
+                    writeCount++;
+                  }
+                  if (writeCount > 1) {
+                    return false;
+                  }
+                  setStateCallSites.set(
+                    references[i].identifier,
+                    id.elements[0]
+                  );
+                }
+              }
+              // Setter is stable.
+              return true;
+            } else if (id.elements[0] === resolved.identifiers[0]) {
+              if (name === 'useState') {
+                const references = resolved.references;
+                for (let i = 0; i < references.length; i++) {
+                  stateVariables.add(references[i].identifier);
+                }
+              }
+              // State variable itself is dynamic.
+              return false;
+            }
+          }
+        } else if (name === 'useTransition') {
+          // Only consider second value in initializing tuple stable.
+          if (
+            id.type === 'ArrayPattern' &&
+            id.elements.length === 2 &&
+            Array.isArray(resolved.identifiers)
+          ) {
+            // Is second tuple value the same reference we're checking?
+            if (id.elements[1] === resolved.identifiers[0]) {
+              // Setter is stable.
+              return true;
+            }
+          }
+        } else if (
+          options.checkMemoizedVariableIsStatic &&
+          (name === 'useMemo' || name === 'useCallback')
+        ) {
+          // check memoized value is stable
+          // useMemo(() => { ... }, []) / useCallback((...) => { ... }, [])
+          const hookArgs = callee.parent.arguments;
+          // check it has dependency list
+          if (hookArgs.length < 2) return false;
+
+          const dependencies = hookArgs[1].elements;
+          if (dependencies.length === 0) {
+            // no dependency, so it's stable
+            return true;
+          }
+
+          // check all dependency is stable
+          for (const dependencyNode of dependencies) {
+            // find resolved from resolved's scope
+            // TODO: check dependencyNode is in arguments?
+            const dependencyRefernece = resolved.scope.references.find(
+              reference => reference.identifier === dependencyNode
+            );
+
+            if (
+              typeof dependencyRefernece !== 'undefined' &&
+              memoizedIsStableKnownHookValue(dependencyRefernece.resolved)
+            ) {
+              continue;
+            } else {
+              return false;
+            }
+          }
+
+          return true;
+        } else {
+          // filter regexp first
+          Object.entries(options.staticHooks).forEach(([key, staticParts]) => {
+            if (
+              typeof staticParts === 'object' &&
+              staticParts.regexp &&
+              new RegExp(key).test(name)
+            ) {
+              options.staticHooks[name] = staticParts.value;
+            }
+          });
+
+          // eslint-disable-next-line no-lonely-if
+          if (options.staticHooks[name]) {
+            const staticParts = options.staticHooks[name];
+            if (staticParts === true) {
+              // entire return value is static
+              return true;
+            } else if (Array.isArray(staticParts)) {
+              // destructured tuple return where some elements are static
+              if (
+                id.type === 'ArrayPattern' &&
+                id.elements.length <= staticParts.length &&
+                Array.isArray(resolved.identifiers)
+              ) {
+                // find index of the resolved ident in the array pattern
+                const idx = id.elements.findIndex(
+                  ident => ident === resolved.identifiers[0]
+                );
+                if (idx >= 0) {
+                  return staticParts[idx];
+                }
+              }
+            } else if (
+              typeof staticParts === 'object' &&
+              id.type === 'ObjectPattern'
+            ) {
+              // destructured object return where some properties are static
+              const property = id.properties.find(
+                p => p.key === resolved.identifiers[0]
+              );
+              if (property) {
+                return staticParts[property.key.name];
+              }
+            }
+          }
+        }
+        // By default assume it's dynamic.
+        return false;
+      }
+
+      // Some are just functions that don't reference anything dynamic.
+      function isFunctionWithoutCapturedValues(resolved) {
+        if (!isArray(resolved.defs)) {
+          return false;
+        }
+        const def = resolved.defs[0];
+        if (def == null) {
+          return false;
+        }
+        if (def.node == null || def.node.id == null) {
+          return false;
+        }
+        // Search the direct component subscopes for
+        // top-level function definitions matching this reference.
+        const fnNode = def.node;
+        const childScopes = componentScope.childScopes;
+        let fnScope = null;
+        let i;
+        for (i = 0; i < childScopes.length; i++) {
+          const childScope = childScopes[i];
+          const childScopeBlock = childScope.block;
+          if (
+            // function handleChange() {}
+            (fnNode.type === 'FunctionDeclaration' &&
+              childScopeBlock === fnNode) ||
+            // const handleChange = () => {}
+            // const handleChange = function() {}
+            (fnNode.type === 'VariableDeclarator' &&
+              childScopeBlock.parent === fnNode)
+          ) {
+            // Found it!
+            fnScope = childScope;
+            break;
+          }
+        }
+        if (fnScope == null) {
+          return false;
+        }
+        // Does this function capture any values
+        // that are in pure scopes (aka render)?
+        for (i = 0; i < fnScope.through.length; i++) {
+          const ref = fnScope.through[i];
+          if (ref.resolved == null) {
+            continue;
+          }
+          if (
+            pureScopes.has(ref.resolved.scope) &&
+            // Stable values are fine though,
+            // although we won't check functions deeper.
+            !memoizedIsStableKnownHookValue(ref.resolved)
+          ) {
+            return false;
+          }
+        }
+        // If we got here, this function doesn't capture anything
+        // from render--or everything it captures is known stable.
+        return true;
+      }
+
+      // These are usually mistaken. Collect them.
+      const currentRefsInEffectCleanup = new Map();
+
+      // Is this reference inside a cleanup function for this effect node?
+      // We can check by traversing scopes upwards  from the reference, and checking
+      // if the last "return () => " we encounter is located directly inside the effect.
+      function isInsideEffectCleanup(reference) {
+        let curScope = reference.from;
+        let isInReturnedFunction = false;
+        while (curScope.block !== node) {
+          if (curScope.type === 'function') {
+            isInReturnedFunction =
+              curScope.block.parent != null &&
+              curScope.block.parent.type === 'ReturnStatement';
+          }
+          curScope = curScope.upper;
+        }
+        return isInReturnedFunction;
+      }
+
+      // Get dependencies from all our resolved references in pure scopes.
+      // Key is dependency string, value is whether it's stable.
+      const dependencies = new Map();
+      const optionalChains = new Map();
+      gatherDependenciesRecursively(scope);
+
+      function gatherDependenciesRecursively(currentScope) {
+        for (const reference of currentScope.references) {
+          // If this reference is not resolved or it is not declared in a pure
+          // scope then we don't care about this reference.
+          if (!reference.resolved) {
+            continue;
+          }
+          if (!pureScopes.has(reference.resolved.scope)) {
+            continue;
+          }
+
+          // Narrow the scope of a dependency if it is, say, a member expression.
+          // Then normalize the narrowed dependency.
+          const referenceNode = fastFindReferenceWithParent(
+            node,
+            reference.identifier
+          );
+          const dependencyNode = getDependency(referenceNode);
+          const dependency = analyzePropertyChain(
+            dependencyNode,
+            optionalChains
+          );
+
+          // Accessing ref.current inside effect cleanup is bad.
+          if (
+            // We're in an effect...
+            isEffect &&
+            // ... and this look like accessing .current...
+            dependencyNode.type === 'Identifier' &&
+            (dependencyNode.parent.type === 'MemberExpression' ||
+              dependencyNode.parent.type === 'OptionalMemberExpression') &&
+            !dependencyNode.parent.computed &&
+            dependencyNode.parent.property.type === 'Identifier' &&
+            dependencyNode.parent.property.name === 'current' &&
+            // ...in a cleanup function or below...
+            isInsideEffectCleanup(reference)
+          ) {
+            currentRefsInEffectCleanup.set(dependency, {
+              reference,
+              dependencyNode
+            });
+          }
+
+          if (
+            dependencyNode.parent.type === 'TSTypeQuery' ||
+            dependencyNode.parent.type === 'TSTypeReference'
+          ) {
+            continue;
+          }
+
+          const def = reference.resolved.defs[0];
+          if (def == null) {
+            continue;
+          }
+          // Ignore references to the function itself as it's not defined yet.
+          if (def.node != null && def.node.init === node.parent) {
+            continue;
+          }
+          // Ignore Flow type parameters
+          if (def.type === 'TypeParameter') {
+            continue;
+          }
+
+          // Add the dependency to a map so we can make sure it is referenced
+          // again in our dependencies array. Remember whether it's stable.
+          if (!dependencies.has(dependency)) {
+            const resolved = reference.resolved;
+            const isStable =
+              memoizedIsStableKnownHookValue(resolved) ||
+              memoizedIsFunctionWithoutCapturedValues(resolved);
+            dependencies.set(dependency, {
+              isStable,
+              references: [reference]
+            });
+          } else {
+            dependencies.get(dependency).references.push(reference);
+          }
+        }
+
+        for (const childScope of currentScope.childScopes) {
+          gatherDependenciesRecursively(childScope);
+        }
+      }
+
+      // Warn about accessing .current in cleanup effects.
+      currentRefsInEffectCleanup.forEach(
+        ({ reference, dependencyNode }, dependency) => {
+          const references = reference.resolved.references;
+          // Is React managing this ref or us?
+          // Let's see if we can find a .current assignment.
+          let foundCurrentAssignment = false;
+          for (let i = 0; i < references.length; i++) {
+            const { identifier } = references[i];
+            const { parent } = identifier;
+            if (
+              parent != null &&
+              // ref.current
+              // Note: no need to handle OptionalMemberExpression because it can't be LHS.
+              parent.type === 'MemberExpression' &&
+              !parent.computed &&
+              parent.property.type === 'Identifier' &&
+              parent.property.name === 'current' &&
+              // ref.current = <something>
+              parent.parent.type === 'AssignmentExpression' &&
+              parent.parent.left === parent
+            ) {
+              foundCurrentAssignment = true;
+              break;
+            }
+          }
+          // We only want to warn about React-managed refs.
+          if (foundCurrentAssignment) {
+            return;
+          }
+          reportProblem({
+            node: dependencyNode.parent.property,
+            message:
+              `The ref value '${dependency}.current' will likely have ` +
+              `changed by the time this effect cleanup function runs. If ` +
+              `this ref points to a node rendered by React, copy ` +
+              `'${dependency}.current' to a variable inside the effect, and ` +
+              `use that variable in the cleanup function.`
+          });
+        }
+      );
+
+      // Warn about assigning to variables in the outer scope.
+      // Those are usually bugs.
+      const staleAssignments = new Set();
+      function reportStaleAssignment(writeExpr, key) {
+        if (staleAssignments.has(key)) {
+          return;
+        }
+        staleAssignments.add(key);
+        reportProblem({
+          node: writeExpr,
+          message:
+            `Assignments to the '${key}' variable from inside React Hook ` +
+            `${context.getSource(reactiveHook)} will be lost after each ` +
+            `render. To preserve the value over time, store it in a useRef ` +
+            `Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside ` +
+            `${context.getSource(reactiveHook)}.`
+        });
+      }
+
+      // Remember which deps are stable and report bad usage first.
+      const stableDependencies = new Set();
+      dependencies.forEach(({ isStable, references }, key) => {
+        if (isStable) {
+          stableDependencies.add(key);
+        }
+        references.forEach(reference => {
+          if (reference.writeExpr) {
+            reportStaleAssignment(reference.writeExpr, key);
+          }
+        });
+      });
+
+      if (staleAssignments.size > 0) {
+        // The intent isn't clear so we'll wait until you fix those first.
+        return;
+      }
+
+      if (!declaredDependenciesNode) {
+        // Check if there are any top-level setState() calls.
+        // Those tend to lead to infinite loops.
+        let setStateInsideEffectWithoutDeps = null;
+        dependencies.forEach(({ references }, key) => {
+          if (setStateInsideEffectWithoutDeps) {
+            return;
+          }
+          references.forEach(reference => {
+            if (setStateInsideEffectWithoutDeps) {
+              return;
+            }
+
+            const id = reference.identifier;
+            const isSetState = setStateCallSites.has(id);
+            if (!isSetState) {
+              return;
+            }
+
+            let fnScope = reference.from;
+            while (fnScope.type !== 'function') {
+              fnScope = fnScope.upper;
+            }
+            const isDirectlyInsideEffect = fnScope.block === node;
+            if (isDirectlyInsideEffect) {
+              // TODO: we could potentially ignore early returns.
+              setStateInsideEffectWithoutDeps = key;
+            }
+          });
+        });
+        if (setStateInsideEffectWithoutDeps) {
+          const { suggestedDependencies } = collectRecommendations({
+            dependencies,
+            declaredDependencies: [],
+            stableDependencies,
+            externalDependencies: new Set(),
+            isEffect: true
+          });
+          reportProblem({
+            node: reactiveHook,
+            message:
+              `React Hook ${reactiveHookName} contains a call to '${setStateInsideEffectWithoutDeps}'. ` +
+              `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+              `To fix this, pass [` +
+              suggestedDependencies.join(', ') +
+              `] as a second argument to the ${reactiveHookName} Hook.`,
+            suggest: [
+              {
+                desc: `Add dependencies array: [${suggestedDependencies.join(
+                  ', '
+                )}]`,
+                fix(fixer) {
+                  return fixer.insertTextAfter(
+                    node,
+                    `, [${suggestedDependencies.join(', ')}]`
+                  );
+                }
+              }
+            ]
+          });
+        }
+        return;
+      }
+
+      const declaredDependencies = [];
+      const externalDependencies = new Set();
+      if (declaredDependenciesNode.type !== 'ArrayExpression') {
+        // If the declared dependencies are not an array expression then we
+        // can't verify that the user provided the correct dependencies. Tell
+        // the user this in an error.
+        reportProblem({
+          node: declaredDependenciesNode,
+          message:
+            `React Hook ${context.getSource(reactiveHook)} was passed a ` +
+            'dependency list that is not an array literal. This means we ' +
+            "can't statically verify whether you've passed the correct " +
+            'dependencies.'
+        });
+      } else {
+        declaredDependenciesNode.elements.forEach(declaredDependencyNode => {
+          // Skip elided elements.
+          if (declaredDependencyNode == null) {
+            return;
+          }
+          // If we see a spread element then add a special warning.
+          if (declaredDependencyNode.type === 'SpreadElement') {
+            reportProblem({
+              node: declaredDependencyNode,
+              message:
+                `React Hook ${context.getSource(reactiveHook)} has a spread ` +
+                "element in its dependency array. This means we can't " +
+                "statically verify whether you've passed the " +
+                'correct dependencies.'
+            });
+            return;
+          }
+          // Try to normalize the declared dependency. If we can't then an error
+          // will be thrown. We will catch that error and report an error.
+          let declaredDependency;
+          try {
+            declaredDependency = analyzePropertyChain(
+              declaredDependencyNode,
+              null
+            );
+          } catch (error) {
+            if (/Unsupported node type/.test(error.message)) {
+              if (declaredDependencyNode.type === 'Literal') {
+                if (dependencies.has(declaredDependencyNode.value)) {
+                  reportProblem({
+                    node: declaredDependencyNode,
+                    message:
+                      `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +
+                      `because it never changes. ` +
+                      `Did you mean to include ${declaredDependencyNode.value} in the array instead?`
+                  });
+                } else {
+                  reportProblem({
+                    node: declaredDependencyNode,
+                    message:
+                      `The ${declaredDependencyNode.raw} literal is not a valid dependency ` +
+                      'because it never changes. You can safely remove it.'
+                  });
+                }
+              } else {
+                reportProblem({
+                  node: declaredDependencyNode,
+                  message:
+                    `React Hook ${context.getSource(reactiveHook)} has a ` +
+                    `complex expression in the dependency array. ` +
+                    'Extract it to a separate variable so it can be statically checked.'
+                });
+              }
+
+              return;
+            }
+            throw error;
+          }
+
+          let maybeID = declaredDependencyNode;
+          while (
+            maybeID.type === 'MemberExpression' ||
+            maybeID.type === 'OptionalMemberExpression' ||
+            maybeID.type === 'ChainExpression'
+          ) {
+            maybeID = maybeID.object || maybeID.expression.object;
+          }
+          const isDeclaredInComponent = !componentScope.through.some(
+            ref => ref.identifier === maybeID
+          );
+
+          // Add the dependency to our declared dependency map.
+          declaredDependencies.push({
+            key: declaredDependency,
+            node: declaredDependencyNode
+          });
+
+          if (!isDeclaredInComponent) {
+            externalDependencies.add(declaredDependency);
+          }
+        });
+      }
+
+      const {
+        suggestedDependencies,
+        unnecessaryDependencies,
+        missingDependencies,
+        duplicateDependencies
+      } = collectRecommendations({
+        dependencies,
+        declaredDependencies,
+        stableDependencies,
+        externalDependencies,
+        isEffect
+      });
+
+      let suggestedDeps = suggestedDependencies;
+
+      const problemCount =
+        duplicateDependencies.size +
+        missingDependencies.size +
+        unnecessaryDependencies.size;
+
+      if (problemCount === 0) {
+        // If nothing else to report, check if some dependencies would
+        // invalidate on every render.
+        const constructions = scanForConstructions({
+          declaredDependencies,
+          declaredDependenciesNode,
+          componentScope,
+          scope
+        });
+        constructions.forEach(
+          ({ construction, isUsedOutsideOfHook, depType }) => {
+            const wrapperHook =
+              depType === 'function' ? 'useCallback' : 'useMemo';
+
+            const constructionType =
+              depType === 'function' ? 'definition' : 'initialization';
+
+            const defaultAdvice = `wrap the ${constructionType} of '${construction.name.name}' in its own ${wrapperHook}() Hook.`;
+
+            const advice = isUsedOutsideOfHook
+              ? `To fix this, ${defaultAdvice}`
+              : `Move it inside the ${reactiveHookName} callback. Alternatively, ${defaultAdvice}`;
+
+            const causation =
+              depType === 'conditional' || depType === 'logical expression'
+                ? 'could make'
+                : 'makes';
+
+            const message =
+              `The '${construction.name.name}' ${depType} ${causation} the dependencies of ` +
+              `${reactiveHookName} Hook (at line ${declaredDependenciesNode.loc.start.line}) ` +
+              `change on every render. ${advice}`;
+
+            let suggest;
+            // Only handle the simple case of variable assignments.
+            // Wrapping function declarations can mess up hoisting.
+            if (
+              isUsedOutsideOfHook &&
+              construction.type === 'Variable' &&
+              // Objects may be mutated after construction, which would make this
+              // fix unsafe. Functions _probably_ won't be mutated, so we'll
+              // allow this fix for them.
+              depType === 'function'
+            ) {
+              suggest = [
+                {
+                  desc: `Wrap the ${constructionType} of '${construction.name.name}' in its own ${wrapperHook}() Hook.`,
+                  fix(fixer) {
+                    const [before, after] =
+                      wrapperHook === 'useMemo'
+                        ? [`useMemo(() => { return `, '; })']
+                        : ['useCallback(', ')'];
+                    return [
+                      // TODO: also add an import?
+                      fixer.insertTextBefore(construction.node.init, before),
+                      // TODO: ideally we'd gather deps here but it would require
+                      // restructuring the rule code. This will cause a new lint
+                      // error to appear immediately for useCallback. Note we're
+                      // not adding [] because would that changes semantics.
+                      fixer.insertTextAfter(construction.node.init, after)
+                    ];
+                  }
+                }
+              ];
+            }
+            // TODO: What if the function needs to change on every render anyway?
+            // Should we suggest removing effect deps as an appropriate fix too?
+            reportProblem({
+              // TODO: Why not report this at the dependency site?
+              node: construction.node,
+              message,
+              suggest
+            });
+          }
+        );
+        return;
+      }
+
+      // If we're going to report a missing dependency,
+      // we might as well recalculate the list ignoring
+      // the currently specified deps. This can result
+      // in some extra deduplication. We can't do this
+      // for effects though because those have legit
+      // use cases for over-specifying deps.
+      if (!isEffect && missingDependencies.size > 0) {
+        suggestedDeps = collectRecommendations({
+          dependencies,
+          declaredDependencies: [], // Pretend we don't know
+          stableDependencies,
+          externalDependencies,
+          isEffect
+        }).suggestedDependencies;
+      }
+
+      // Alphabetize the suggestions, but only if deps were already alphabetized.
+      function areDeclaredDepsAlphabetized() {
+        if (declaredDependencies.length === 0) {
+          return true;
+        }
+        const declaredDepKeys = declaredDependencies.map(dep => dep.key);
+        const sortedDeclaredDepKeys = declaredDepKeys.slice().sort();
+        return declaredDepKeys.join(',') === sortedDeclaredDepKeys.join(',');
+      }
+      if (areDeclaredDepsAlphabetized()) {
+        suggestedDeps.sort();
+      }
+
+      // Most of our algorithm deals with dependency paths with optional chaining stripped.
+      // This function is the last step before printing a dependency, so now is a good time to
+      // check whether any members in our path are always used as optional-only. In that case,
+      // we will use ?. instead of . to concatenate those parts of the path.
+      function formatDependency(path) {
+        const members = path.split('.');
+        let finalPath = '';
+        for (let i = 0; i < members.length; i++) {
+          if (i !== 0) {
+            const pathSoFar = members.slice(0, i + 1).join('.');
+            const isOptional = optionalChains.get(pathSoFar) === true;
+            finalPath += isOptional ? '?.' : '.';
+          }
+          finalPath += members[i];
+        }
+        return finalPath;
+      }
+
+      function getWarningMessage(deps, singlePrefix, label, fixVerb) {
+        if (deps.size === 0) {
+          return null;
+        }
+        return (
+          (deps.size > 1 ? '' : singlePrefix + ' ') +
+          label +
+          ' ' +
+          (deps.size > 1 ? 'dependencies' : 'dependency') +
+          ': ' +
+          joinEnglish(
+            Array.from(deps)
+              .sort()
+              .map(name => "'" + formatDependency(name) + "'")
+          ) +
+          `. Either ${fixVerb} ${
+            deps.size > 1 ? 'them' : 'it'
+          } or remove the dependency array.`
+        );
+      }
+
+      let extraWarning = '';
+      if (unnecessaryDependencies.size > 0) {
+        let badRef = null;
+        Array.from(unnecessaryDependencies.keys()).forEach(key => {
+          if (badRef != null) {
+            return;
+          }
+          if (key.endsWith('.current')) {
+            badRef = key;
+          }
+        });
+        if (badRef != null) {
+          extraWarning =
+            ` Mutable values like '${badRef}' aren't valid dependencies ` +
+            "because mutating them doesn't re-render the component.";
+        } else if (externalDependencies.size > 0) {
+          const dep = Array.from(externalDependencies)[0];
+          // Don't show this warning for things that likely just got moved *inside* the callback
+          // because in that case they're clearly not referring to globals.
+          if (!scope.set.has(dep)) {
+            extraWarning =
+              ` Outer scope values like '${dep}' aren't valid dependencies ` +
+              `because mutating them doesn't re-render the component.`;
+          }
+        }
+      }
+
+      // `props.foo()` marks `props` as a dependency because it has
+      // a `this` value. This warning can be confusing.
+      // So if we're going to show it, append a clarification.
+      if (!extraWarning && missingDependencies.has('props')) {
+        const propDep = dependencies.get('props');
+        if (propDep == null) {
+          return;
+        }
+        const refs = propDep.references;
+        if (!Array.isArray(refs)) {
+          return;
+        }
+        let isPropsOnlyUsedInMembers = true;
+        for (let i = 0; i < refs.length; i++) {
+          const ref = refs[i];
+          const id = fastFindReferenceWithParent(
+            componentScope.block,
+            ref.identifier
+          );
+          if (!id) {
+            isPropsOnlyUsedInMembers = false;
+            break;
+          }
+          const parent = id.parent;
+          if (parent == null) {
+            isPropsOnlyUsedInMembers = false;
+            break;
+          }
+          if (
+            parent.type !== 'MemberExpression' &&
+            parent.type !== 'OptionalMemberExpression'
+          ) {
+            isPropsOnlyUsedInMembers = false;
+            break;
+          }
+        }
+        if (isPropsOnlyUsedInMembers) {
+          extraWarning =
+            ` However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside of ` +
+            `the ${reactiveHookName} call and refer to those specific props ` +
+            `inside ${context.getSource(reactiveHook)}.`;
+        }
+      }
+
+      if (!extraWarning && missingDependencies.size > 0) {
+        // See if the user is trying to avoid specifying a callable prop.
+        // This usually means they're unaware of useCallback.
+        let missingCallbackDep = null;
+        missingDependencies.forEach(missingDep => {
+          if (missingCallbackDep) {
+            return;
+          }
+          // Is this a variable from top scope?
+          const topScopeRef = componentScope.set.get(missingDep);
+          const usedDep = dependencies.get(missingDep);
+          if (usedDep.references[0].resolved !== topScopeRef) {
+            return;
+          }
+          // Is this a destructured prop?
+          const def = topScopeRef.defs[0];
+          if (def == null || def.name == null || def.type !== 'Parameter') {
+            return;
+          }
+          // Was it called in at least one case? Then it's a function.
+          let isFunctionCall = false;
+          let id;
+          for (let i = 0; i < usedDep.references.length; i++) {
+            id = usedDep.references[i].identifier;
+            if (
+              id != null &&
+              id.parent != null &&
+              (id.parent.type === 'CallExpression' ||
+                id.parent.type === 'OptionalCallExpression') &&
+              id.parent.callee === id
+            ) {
+              isFunctionCall = true;
+              break;
+            }
+          }
+          if (!isFunctionCall) {
+            return;
+          }
+          // If it's missing (i.e. in component scope) *and* it's a parameter
+          // then it is definitely coming from props destructuring.
+          // (It could also be props itself but we wouldn't be calling it then.)
+          missingCallbackDep = missingDep;
+        });
+        if (missingCallbackDep != null) {
+          extraWarning =
+            ` If '${missingCallbackDep}' changes too often, ` +
+            `find the parent component that defines it ` +
+            `and wrap that definition in useCallback.`;
+        }
+      }
+
+      if (!extraWarning && missingDependencies.size > 0) {
+        let setStateRecommendation = null;
+        missingDependencies.forEach(missingDep => {
+          if (setStateRecommendation != null) {
+            return;
+          }
+          const usedDep = dependencies.get(missingDep);
+          const references = usedDep.references;
+          let id;
+          let maybeCall;
+          for (let i = 0; i < references.length; i++) {
+            id = references[i].identifier;
+            maybeCall = id.parent;
+            // Try to see if we have setState(someExpr(missingDep)).
+            while (maybeCall != null && maybeCall !== componentScope.block) {
+              if (maybeCall.type === 'CallExpression') {
+                const correspondingStateVariable = setStateCallSites.get(
+                  maybeCall.callee
+                );
+                if (correspondingStateVariable != null) {
+                  if (correspondingStateVariable.name === missingDep) {
+                    // setCount(count + 1)
+                    setStateRecommendation = {
+                      missingDep,
+                      setter: maybeCall.callee.name,
+                      form: 'updater'
+                    };
+                  } else if (stateVariables.has(id)) {
+                    // setCount(count + increment)
+                    setStateRecommendation = {
+                      missingDep,
+                      setter: maybeCall.callee.name,
+                      form: 'reducer'
+                    };
+                  } else {
+                    const resolved = references[i].resolved;
+                    if (resolved != null) {
+                      // If it's a parameter *and* a missing dep,
+                      // it must be a prop or something inside a prop.
+                      // Therefore, recommend an inline reducer.
+                      const def = resolved.defs[0];
+                      if (def != null && def.type === 'Parameter') {
+                        setStateRecommendation = {
+                          missingDep,
+                          setter: maybeCall.callee.name,
+                          form: 'inlineReducer'
+                        };
+                      }
+                    }
+                  }
+                  break;
+                }
+              }
+              maybeCall = maybeCall.parent;
+            }
+            if (setStateRecommendation != null) {
+              break;
+            }
+          }
+        });
+        if (setStateRecommendation != null) {
+          switch (setStateRecommendation.form) {
+            case 'reducer':
+              extraWarning =
+                ` You can also replace multiple useState variables with useReducer ` +
+                `if '${setStateRecommendation.setter}' needs the ` +
+                `current value of '${setStateRecommendation.missingDep}'.`;
+              break;
+            case 'inlineReducer':
+              extraWarning =
+                ` If '${setStateRecommendation.setter}' needs the ` +
+                `current value of '${setStateRecommendation.missingDep}', ` +
+                `you can also switch to useReducer instead of useState and ` +
+                `read '${setStateRecommendation.missingDep}' in the reducer.`;
+              break;
+            case 'updater':
+              extraWarning = ` You can also do a functional update '${
+                setStateRecommendation.setter
+              }(${setStateRecommendation.missingDep.substring(
+                0,
+                1
+              )} => ...)' if you only need '${
+                setStateRecommendation.missingDep
+              }' in the '${setStateRecommendation.setter}' call.`;
+              break;
+            default:
+              throw new Error('Unknown case.');
+          }
+        }
+      }
+
+      reportProblem({
+        node: declaredDependenciesNode,
+        message:
+          `React Hook ${context.getSource(reactiveHook)} has ` +
+          // To avoid a long message, show the next actionable item.
+          (getWarningMessage(missingDependencies, 'a', 'missing', 'include') ||
+            getWarningMessage(
+              unnecessaryDependencies,
+              'an',
+              'unnecessary',
+              'exclude'
+            ) ||
+            getWarningMessage(
+              duplicateDependencies,
+              'a',
+              'duplicate',
+              'omit'
+            )) +
+          extraWarning,
+        suggest: [
+          {
+            desc: `Update the dependencies array to be: [${suggestedDeps
+              .map(formatDependency)
+              .join(', ')}]`,
+            fix(fixer) {
+              // TODO: consider preserving the comments or formatting?
+              return fixer.replaceText(
+                declaredDependenciesNode,
+                `[${suggestedDeps.map(formatDependency).join(', ')}]`
+              );
+            }
+          }
+        ]
+      });
+    }
+
+    function visitCallExpression(node) {
+      const callbackIndex = getReactiveHookCallbackIndex(node.callee, options);
+      if (callbackIndex === -1) {
+        // Not a React Hook call that needs deps.
+        return;
+      }
+      const callback = node.arguments[callbackIndex];
+      const reactiveHook = node.callee;
+      const reactiveHookName = getNodeWithoutReactNamespace(reactiveHook).name;
+      const declaredDependenciesNode = node.arguments[callbackIndex + 1];
+      const isEffect = /Effect($|[^a-z])/g.test(reactiveHookName);
+
+      // Check whether a callback is supplied. If there is no callback supplied
+      // then the hook will not work and React will throw a TypeError.
+      // So no need to check for dependency inclusion.
+      if (!callback) {
+        reportProblem({
+          node: reactiveHook,
+          message:
+            `React Hook ${reactiveHookName} requires an effect callback. ` +
+            `Did you forget to pass a callback to the hook?`
+        });
+        return;
+      }
+
+      // Check the declared dependencies for this reactive hook. If there is no
+      // second argument then the reactive callback will re-run on every render.
+      // So no need to check for dependency inclusion.
+      if (!declaredDependenciesNode && !isEffect) {
+        // These are only used for optimization.
+        if (
+          reactiveHookName === 'useMemo' ||
+          reactiveHookName === 'useCallback'
+        ) {
+          // TODO: Can this have a suggestion?
+          reportProblem({
+            node: reactiveHook,
+            message:
+              `React Hook ${reactiveHookName} does nothing when called with ` +
+              `only one argument. Did you forget to pass an array of ` +
+              `dependencies?`
+          });
+        }
+        return;
+      }
+
+      switch (callback.type) {
+        case 'FunctionExpression':
+        case 'ArrowFunctionExpression':
+          visitFunctionWithDependencies(
+            callback,
+            declaredDependenciesNode,
+            reactiveHook,
+            reactiveHookName,
+            isEffect
+          );
+          return; // Handled
+        case 'Identifier':
+          if (!declaredDependenciesNode) {
+            // No deps, no problems.
+            return; // Handled
+          }
+          // The function passed as a callback is not written inline.
+          // But perhaps it's in the dependencies array?
+          if (
+            declaredDependenciesNode.elements &&
+            declaredDependenciesNode.elements.some(
+              el => el && el.type === 'Identifier' && el.name === callback.name
+            )
+          ) {
+            // If it's already in the list of deps, we don't care because
+            // this is valid regardless.
+            return; // Handled
+          }
+          // We'll do our best effort to find it, complain otherwise.
+          const variable = context.getScope().set.get(callback.name);
+          if (variable == null || variable.defs == null) {
+            // If it's not in scope, we don't care.
+            return; // Handled
+          }
+          // The function passed as a callback is not written inline.
+          // But it's defined somewhere in the render scope.
+          // We'll do our best effort to find and check it, complain otherwise.
+          const def = variable.defs[0];
+          if (!def || !def.node) {
+            break; // Unhandled
+          }
+          if (def.type !== 'Variable' && def.type !== 'FunctionName') {
+            // Parameter or an unusual pattern. Bail out.
+            break; // Unhandled
+          }
+          switch (def.node.type) {
+            case 'FunctionDeclaration':
+              // useEffect(() => { ... }, []);
+              visitFunctionWithDependencies(
+                def.node,
+                declaredDependenciesNode,
+                reactiveHook,
+                reactiveHookName,
+                isEffect
+              );
+              return; // Handled
+            case 'VariableDeclarator':
+              const init = def.node.init;
+              if (!init) {
+                break; // Unhandled
+              }
+              switch (init.type) {
+                // const effectBody = () => {...};
+                // useEffect(effectBody, []);
+                case 'ArrowFunctionExpression':
+                case 'FunctionExpression':
+                  // We can inspect this function as if it were inline.
+                  visitFunctionWithDependencies(
+                    init,
+                    declaredDependenciesNode,
+                    reactiveHook,
+                    reactiveHookName,
+                    isEffect
+                  );
+                  return; // Handled
+              }
+              break; // Unhandled
+          }
+          break; // Unhandled
+        default:
+          // useEffect(generateEffectBody(), []);
+          reportProblem({
+            node: reactiveHook,
+            message:
+              `React Hook ${reactiveHookName} received a function whose dependencies ` +
+              `are unknown. Pass an inline function instead.`
+          });
+          return; // Handled
+      }
+
+      // Something unusual. Fall back to suggesting to add the body itself as a dep.
+      reportProblem({
+        node: reactiveHook,
+        message:
+          `React Hook ${reactiveHookName} has a missing dependency: '${callback.name}'. ` +
+          `Either include it or remove the dependency array.`,
+        suggest: [
+          {
+            desc: `Update the dependencies array to be: [${callback.name}]`,
+            fix(fixer) {
+              return fixer.replaceText(
+                declaredDependenciesNode,
+                `[${callback.name}]`
+              );
+            }
+          }
+        ]
+      });
+    }
+
+    return {
+      CallExpression: visitCallExpression
+    };
+  }
+};
+
+// The meat of the logic.
+function collectRecommendations({
+  dependencies,
+  declaredDependencies,
+  stableDependencies,
+  externalDependencies,
+  isEffect
+}) {
+  // 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() {
+    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, path) {
+    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, path, fn) {
+    const keys = path.split('.');
+    let node = rootNode;
+    for (const key of keys) {
+      const child = node.children.get(key);
+      if (!child) {
+        return;
+      }
+      fn(child);
+      node = child;
+    }
+  }
+
+  // Now we can learn which dependencies are missing or necessary.
+  const missingDependencies = new Set();
+  const satisfyingDependencies = new Set();
+  scanTreeRecursively(
+    depTree,
+    missingDependencies,
+    satisfyingDependencies,
+    key => key
+  );
+  function scanTreeRecursively(node, missingPaths, satisfyingPaths, keyToPath) {
+    node.children.forEach((child, key) => {
+      const path = keyToPath(key);
+      if (child.isSatisfiedRecursively) {
+        if (child.isSubtreeUsed) {
+          // Remember this dep actually satisfied something.
+          satisfyingPaths.add(path);
+        }
+        // It doesn't matter if there's something deeper.
+        // It would be transitively satisfied since we assume immutability.
+        // `props.foo` is enough if you read `props.foo.id`.
+        return;
+      }
+      if (child.isUsed) {
+        // Remember that no declared deps satisfied this node.
+        missingPaths.add(path);
+        // If we got here, nothing in its subtree was satisfied.
+        // No need to search further.
+        return;
+      }
+      scanTreeRecursively(
+        child,
+        missingPaths,
+        satisfyingPaths,
+        childKey => path + '.' + childKey
+      );
+    });
+  }
+
+  // Collect suggestions in the order they were originally specified.
+  const suggestedDependencies = [];
+  const unnecessaryDependencies = new Set();
+  const duplicateDependencies = new Set();
+  declaredDependencies.forEach(({ key }) => {
+    // Does this declared dep satisfy a real need?
+    if (satisfyingDependencies.has(key)) {
+      if (suggestedDependencies.indexOf(key) === -1) {
+        // Good one.
+        suggestedDependencies.push(key);
+      } else {
+        // Duplicate.
+        duplicateDependencies.add(key);
+      }
+    } else if (
+      isEffect &&
+      !key.endsWith('.current') &&
+      !externalDependencies.has(key)
+    ) {
+      // Effects are allowed extra "unnecessary" deps.
+      // Such as resetting scroll when ID changes.
+      // Consider them legit.
+      // The exception is ref.current which is always wrong.
+      if (suggestedDependencies.indexOf(key) === -1) {
+        suggestedDependencies.push(key);
+      }
+    } else {
+      // It's definitely not needed.
+      unnecessaryDependencies.add(key);
+    }
+  });
+
+  // Then add the missing ones at the end.
+  missingDependencies.forEach(key => {
+    suggestedDependencies.push(key);
+  });
+
+  return {
+    suggestedDependencies,
+    unnecessaryDependencies,
+    duplicateDependencies,
+    missingDependencies
+  };
+}
+
+// If the node will result in constructing a referentially unique value, return
+// its human readable type name, else return null.
+function getConstructionExpressionType(node) {
+  switch (node.type) {
+    case 'ObjectExpression':
+      return 'object';
+    case 'ArrayExpression':
+      return 'array';
+    case 'ArrowFunctionExpression':
+    case 'FunctionExpression':
+      return 'function';
+    case 'ClassExpression':
+      return 'class';
+    case 'ConditionalExpression':
+      if (
+        getConstructionExpressionType(node.consequent) != null ||
+        getConstructionExpressionType(node.alternate) != null
+      ) {
+        return 'conditional';
+      }
+      return null;
+    case 'LogicalExpression':
+      if (
+        getConstructionExpressionType(node.left) != null ||
+        getConstructionExpressionType(node.right) != null
+      ) {
+        return 'logical expression';
+      }
+      return null;
+    case 'JSXFragment':
+      return 'JSX fragment';
+    case 'JSXElement':
+      return 'JSX element';
+    case 'AssignmentExpression':
+      if (getConstructionExpressionType(node.right) != null) {
+        return 'assignment expression';
+      }
+      return null;
+    case 'NewExpression':
+      return 'object construction';
+    case 'Literal':
+      if (node.value instanceof RegExp) {
+        return 'regular expression';
+      }
+      return null;
+    case 'TypeCastExpression':
+      return getConstructionExpressionType(node.expression);
+    case 'TSAsExpression':
+      return getConstructionExpressionType(node.expression);
+  }
+  return null;
+}
+
+// Finds variables declared as dependencies
+// that would invalidate on every render.
+function scanForConstructions({
+  declaredDependencies,
+  declaredDependenciesNode,
+  componentScope,
+  scope
+}) {
+  const constructions = declaredDependencies
+    .map(({ key }) => {
+      const ref = componentScope.variables.find(v => v.name === key);
+      if (ref == null) {
+        return null;
+      }
+
+      const node = ref.defs[0];
+      if (node == null) {
+        return null;
+      }
+      // const handleChange = function () {}
+      // const handleChange = () => {}
+      // const foo = {}
+      // const foo = []
+      // etc.
+      if (
+        node.type === 'Variable' &&
+        node.node.type === 'VariableDeclarator' &&
+        node.node.id.type === 'Identifier' && // Ensure this is not destructed assignment
+        node.node.init != null
+      ) {
+        const constantExpressionType = getConstructionExpressionType(
+          node.node.init
+        );
+        if (constantExpressionType != null) {
+          return [ref, constantExpressionType];
+        }
+      }
+      // function handleChange() {}
+      if (
+        node.type === 'FunctionName' &&
+        node.node.type === 'FunctionDeclaration'
+      ) {
+        return [ref, 'function'];
+      }
+
+      // class Foo {}
+      if (node.type === 'ClassName' && node.node.type === 'ClassDeclaration') {
+        return [ref, 'class'];
+      }
+      return null;
+    })
+    .filter(Boolean);
+
+  function isUsedOutsideOfHook(ref) {
+    let foundWriteExpr = false;
+    for (let i = 0; i < ref.references.length; i++) {
+      const reference = ref.references[i];
+      if (reference.writeExpr) {
+        if (foundWriteExpr) {
+          // Two writes to the same function.
+          return true;
+        }
+        // Ignore first write as it's not usage.
+        foundWriteExpr = true;
+        continue;
+      }
+      let currentScope = reference.from;
+      while (currentScope !== scope && currentScope != null) {
+        currentScope = currentScope.upper;
+      }
+      if (currentScope !== scope) {
+        // This reference is outside the Hook callback.
+        // It can only be legit if it's the deps array.
+        if (!isAncestorNodeOf(declaredDependenciesNode, reference.identifier)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  return constructions.map(([ref, depType]) => ({
+    construction: ref.defs[0],
+    depType,
+    isUsedOutsideOfHook: isUsedOutsideOfHook(ref)
+  }));
+}
+
+/**
+ * Assuming () means the passed/returned node:
+ * (props) => (props)
+ * props.(foo) => (props.foo)
+ * props.foo.(bar) => (props).foo.bar
+ * props.foo.bar.(baz) => (props).foo.bar.baz
+ */
+function getDependency(node) {
+  if (
+    (node.parent.type === 'MemberExpression' ||
+      node.parent.type === 'OptionalMemberExpression') &&
+    node.parent.object === node &&
+    node.parent.property.name !== 'current' &&
+    !node.parent.computed &&
+    !(
+      node.parent.parent != null &&
+      (node.parent.parent.type === 'CallExpression' ||
+        node.parent.parent.type === 'OptionalCallExpression') &&
+      node.parent.parent.callee === node.parent
+    )
+  ) {
+    return getDependency(node.parent);
+  } else if (
+    // Note: we don't check OptionalMemberExpression because it can't be LHS.
+    node.type === 'MemberExpression' &&
+    node.parent &&
+    node.parent.type === 'AssignmentExpression' &&
+    node.parent.left === node
+  ) {
+    return node.object;
+  }
+  return node;
+}
+
+/**
+ * Mark a node as either optional or required.
+ * Note: If the node argument is an OptionalMemberExpression, it doesn't necessarily mean it is optional.
+ * It just means there is an optional member somewhere inside.
+ * This particular node might still represent a required member, so check .optional field.
+ */
+function markNode(node, optionalChains, result) {
+  if (optionalChains) {
+    if (node.optional) {
+      // We only want to consider it optional if *all* usages were optional.
+      if (!optionalChains.has(result)) {
+        // Mark as (maybe) optional. If there's a required usage, this will be overridden.
+        optionalChains.set(result, true);
+      }
+    } else {
+      // Mark as required.
+      optionalChains.set(result, false);
+    }
+  }
+}
+
+/**
+ * Assuming () means the passed node.
+ * (foo) -> 'foo'
+ * foo(.)bar -> 'foo.bar'
+ * foo.bar(.)baz -> 'foo.bar.baz'
+ * Otherwise throw.
+ */
+function analyzePropertyChain(node, optionalChains) {
+  if (node.type === 'Identifier' || node.type === 'JSXIdentifier') {
+    const result = node.name;
+    if (optionalChains) {
+      // Mark as required.
+      optionalChains.set(result, false);
+    }
+    return result;
+  } else if (node.type === 'MemberExpression' && !node.computed) {
+    const object = analyzePropertyChain(node.object, optionalChains);
+    const property = analyzePropertyChain(node.property, null);
+    const result = `${object}.${property}`;
+    markNode(node, optionalChains, result);
+    return result;
+  } else if (node.type === 'OptionalMemberExpression' && !node.computed) {
+    const object = analyzePropertyChain(node.object, optionalChains);
+    const property = analyzePropertyChain(node.property, null);
+    const result = `${object}.${property}`;
+    markNode(node, optionalChains, result);
+    return result;
+  } else if (node.type === 'ChainExpression' && !node.computed) {
+    const expression = node.expression;
+
+    if (expression.type === 'CallExpression') {
+      throw new Error(`Unsupported node type: ${expression.type}`);
+    }
+
+    const object = analyzePropertyChain(expression.object, optionalChains);
+    const property = analyzePropertyChain(expression.property, null);
+    const result = `${object}.${property}`;
+    markNode(expression, optionalChains, result);
+    return result;
+  }
+  throw new Error(`Unsupported node type: ${node.type}`);
+}
+
+function getNodeWithoutReactNamespace(node) {
+  if (
+    node.type === 'MemberExpression' &&
+    node.object.type === 'Identifier' &&
+    node.object.name === 'React' &&
+    node.property.type === 'Identifier' &&
+    !node.computed
+  ) {
+    return node.property;
+  }
+  return node;
+}
+
+// What's the index of callback that needs to be analyzed for a given Hook?
+// -1 if it's not a Hook we care about (e.g. useState).
+// 0 for useEffect/useMemo/useCallback(fn).
+// 1 for useImperativeHandle(ref, fn).
+// For additionally configured Hooks, assume that they're like useEffect (0).
+function getReactiveHookCallbackIndex(calleeNode, options) {
+  const node = getNodeWithoutReactNamespace(calleeNode);
+  if (node.type !== 'Identifier') {
+    return -1;
+  }
+  switch (node.name) {
+    case 'useEffect':
+    case 'useLayoutEffect':
+    case 'useCallback':
+    case 'useMemo':
+      // useEffect(fn)
+      return 0;
+    case 'useImperativeHandle':
+      // useImperativeHandle(ref, fn)
+      return 1;
+    default:
+      if (node === calleeNode && options && options.additionalHooks) {
+        // Allow the user to provide a regular expression which enables the lint to
+        // target custom reactive hooks.
+        let name;
+        try {
+          name = analyzePropertyChain(node, null);
+        } catch (error) {
+          if (/Unsupported node type/.test(error.message)) {
+            return 0;
+          }
+          throw error;
+        }
+        return options.additionalHooks.test(name) ? 0 : -1;
+      }
+      return -1;
+  }
+}
+
+/**
+ * ESLint won't assign node.parent to references from context.getScope()
+ *
+ * So instead we search for the node from an ancestor assigning node.parent
+ * as we go. This mutates the AST.
+ *
+ * This traversal is:
+ * - optimized by only searching nodes with a range surrounding our target node
+ * - agnostic to AST node types, it looks for `{ type: string, ... }`
+ */
+function fastFindReferenceWithParent(start, target) {
+  const queue = [start];
+  let item = null;
+
+  while (queue.length) {
+    item = queue.shift();
+
+    if (isSameIdentifier(item, target)) {
+      return item;
+    }
+
+    if (!isAncestorNodeOf(item, target)) {
+      continue;
+    }
+
+    for (const [key, value] of Object.entries(item)) {
+      if (key === 'parent') {
+        continue;
+      }
+      if (isNodeLike(value)) {
+        value.parent = item;
+        queue.push(value);
+      } else if (Array.isArray(value)) {
+        // eslint-disable-next-line no-loop-func
+        value.forEach(val => {
+          if (isNodeLike(val)) {
+            val.parent = item;
+            queue.push(val);
+          }
+        });
+      }
+    }
+  }
+
+  return null;
+}
+
+function joinEnglish(arr) {
+  let s = '';
+  for (let i = 0; i < arr.length; i++) {
+    s += arr[i];
+    if (i === 0 && arr.length === 2) {
+      s += ' and ';
+    } else if (i === arr.length - 2 && arr.length > 2) {
+      s += ', and ';
+    } else if (i < arr.length - 1) {
+      s += ', ';
+    }
+  }
+  return s;
+}
+
+function isNodeLike(val) {
+  return (
+    typeof val === 'object' &&
+    val != null &&
+    !Array.isArray(val) &&
+    typeof val.type === 'string'
+  );
+}
+
+function isSameIdentifier(a, b) {
+  return (
+    (a.type === 'Identifier' || a.type === 'JSXIdentifier') &&
+    a.type === b.type &&
+    a.name === b.name &&
+    a.range[0] === b.range[0] &&
+    a.range[1] === b.range[1]
+  );
+}
+
+function isAncestorNodeOf(a, b) {
+  return a.range[0] <= b.range[0] && a.range[1] >= b.range[1];
+}