You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Allow useEffect(fn, undefined) in react-hooks/exhaustive-deps. (#27525)
## Summary
There is a bug in the `react-hooks/exhaustive-deps` rule that forbids
the dependencies argument from being `undefined`. It triggers the error
that the dependency list is not an array literal. This makes sense in
pre ES5 strict-mode environments as undefined could be redefined, but
should not be a concern in today's JS environments.
**Justification:**
* The deps argument being undefined (for `useEffect` calls etc.) is a
valid use case for hooks that should re-run on every render.
* The deps argument being omitted is considered a valid use case by the
`exhaustive-deps` rule already.
* The TypeScript type definitions support passing `undefined` because
hooks are typed as `useEffect(effect: EffectCallback, deps?:
DependencyList): void;`.
* Since omitting an argument and passing `undefined` are considered
equivalent, this eslint rule should consider them as equivalent too.
Further, I accidentally forgot passing a dependency array to `useEffect`
in code that I shared on Twitter, and people started abusing me about
it. I'd like to create an eslint rule for my projects that requires me
to provide a dep argument in all cases (`undefined`, `[]` or the list of
dependencies) so that I can avoid such problems in the future. This
would also force me to always think about the dependencies instead of
accidentally forgetting them and my hook running on each render. In an
audit of my own codebase I had about 3% of hooks that I want to run on
each render, and adding an explicit `undefined` seems reasonable in
those situations.
It could be argued this could be an option or part of the
`exhaustive-deps` rule, but it's probably better to merge this PR, make
a release and see if my custom eslint rule gains traction in the future.
## How did you test this change?
* Added a test.
* `yarn test ESLintRuleExhaustiveDeps-test`
* Careful code inspection.
DiffTrain build for commit d947c2f.
Copy file name to clipboardExpand all lines: compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -24901,7 +24901,7 @@ function createFiberRoot(
24901
24901
return root;
24902
24902
}
24903
24903
24904
-
var ReactVersion = "18.3.0-canary-77c4ac2ce-20231031";
24904
+
var ReactVersion = "18.3.0-canary-d947c2f11-20231101";
Copy file name to clipboardExpand all lines: compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9039,7 +9039,7 @@ var devToolsConfig$jscomp$inline_1033 = {
9039
9039
throwError("TestRenderer does not support findFiberByHostInstance()");
9040
9040
},
9041
9041
bundleType: 0,
9042
-
version: "18.3.0-canary-77c4ac2ce-20231031",
9042
+
version: "18.3.0-canary-d947c2f11-20231101",
9043
9043
rendererPackageName: "react-test-renderer"
9044
9044
};
9045
9045
varinternals$jscomp$inline_1226={
@@ -9070,7 +9070,7 @@ var internals$jscomp$inline_1226 = {
Copy file name to clipboardExpand all lines: compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -9465,7 +9465,7 @@ var devToolsConfig$jscomp$inline_1075 = {
9465
9465
throwError("TestRenderer does not support findFiberByHostInstance()");
9466
9466
},
9467
9467
bundleType: 0,
9468
-
version: "18.3.0-canary-77c4ac2ce-20231031",
9468
+
version: "18.3.0-canary-d947c2f11-20231101",
9469
9469
rendererPackageName: "react-test-renderer"
9470
9470
};
9471
9471
varinternals$jscomp$inline_1267={
@@ -9496,7 +9496,7 @@ var internals$jscomp$inline_1267 = {
0 commit comments