Add eslint-plugin-react-hooks/exhaustive-deps rule to check stale closure dependencies (#14636)

* Add ESLint rule for useEffect/useCallback/useMemo Hook dependencies

* Fix ReactiveDependencies rule

* fix lint errors

* Support useLayoutEffect

* Add some failing tests and comments

* Gather dependencies in child scopes too

* If we don't find foo.bar.baz in deps, try foo.bar, then foo

* foo is enough for both foo.bar and foo.baz

* Shorter rule name

* Add fixable meta

* Remove a bunch of code and start from scratch

* [WIP] Only report errors from dependency array

This results in nicer editing experience. Also has autofix.

* Fix typo

* [Temp] Skip all tests

* Fix the first test

* Revamp the test suite

* Fix [foo] to include foo.bar

* Don't suggest call expressions

* Special case 'current' for refs

* Don't complain about known static deps

* Support useImperativeHandle

* Better punctuation and formatting

* More uniform message format

* Treat React.useRef/useState/useReducer as static too

* Add special message for ref.current

* Add a TODO case

* Alphabetize the autofix

* Only alphabetize if it already was

* Don't add static deps by default

* Add an undefined variable case

* Tweak wording

* Rename to exhaustive-deps

* Clean up / refactor a little bit

Author: gaearon

fixtures/eslint/.eslintrc.json

@@ -9,6 +9,7 @@
   },
   "plugins": ["react-hooks"],
   "rules": {
-    "react-hooks/rules-of-hooks": 2
+    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/exhaustive-deps": 2
   }
 }

fixtures/eslint/index.js

@@ -4,8 +4,26 @@
 // 2. "File > Add Folder to Workspace" this specific folder in VSCode with ESLint extension
 // 3. Changes to the rule source should get picked up without restarting ESLint server
 
-function Foo() {
-  if (condition) {
-    useEffect(() => {});
-  }
+function Comment({comment, commentSource}) {
+  const currentUserID = comment.viewer.id;
+  const environment = RelayEnvironment.forUser(currentUserID);
+  const commentID = nullthrows(comment.id);
+  useEffect(
+    () => {
+      const subscription = SubscriptionCounter.subscribeOnce(
+        `StoreSubscription_${commentID}`,
+        () =>
+          StoreSubscription.subscribe(
+            environment,
+            {
+              comment_id: commentID,
+            },
+            currentUserID,
+            commentSource
+          )
+      );
+      return () => subscription.dispose();
+    },
+    [commentID, commentSource, currentUserID, environment]
+  );
 }