ESLint rule for Object & array dependencies in the React useEffect Hook

Question

The app that I work on is having an issue with using non-memoized versions of reference types such as arrays, objects, and functions (see Object & array dependencies in the React useEffect Hook). At the moment I am going through all of our code and manually fixing the issues, however this is not an ideal long-term solution for preventing developers from making the same mistake in the future.

I am investigating ways to prevent this from happening in the future to optimize performance and would like to find a lint rule to enforce that this isn't done by anyone in the future. However, I'm not seeing one.

Does anyone have any suggestions on good ways to enforce that this error isn't made other than just communicating it effectively with the entire development team and helping to make sure that everyone is aware to watch for this during code reviews?

Does this ESLint plugin from the React team satisfy what you need? npmjs.com/package/eslint-plugin-react-hooks — evelynhathaway
– evelynhathaway, Commented Jun 8, 2021 at 2:04
@evelynhathaway Thanks for the comment! Unfortunately, though that plugin doesn't solve this issue (we are actually already using it). One of the reasons that this is such a gnarly problem is that it isn't technically violating any of the Rules of Hooks, it's just not technically correct or performant. — Suerg
– Suerg, Commented Jun 8, 2021 at 14:00
So to clarify the issue, people keep adding full objects/arrays to the dependency list of hooks, and you'd like to warn them about not doing this (automatically, by a linter), and suggest alternatives? Am I understanding this correctly? — Balázs Édes
– Balázs Édes, Commented Nov 20, 2021 at 9:43
Yes, you're at least understanding it the way I understood it :) We have the same need and would love a linter that warns any dev adding an object or array to the dependency list of hooks. — pir
– pir, Commented Nov 20, 2021 at 10:28
@pir I did find github.com/yannickcr/eslint-plugin-react/pull/2848 which is pretty close, but for a different use case. For our use case with hooks described in this question, we ended up making a checkbox on our PR template that explains the issue to give visibility to all the developers and keep it top of mind. — Suerg
– Suerg, Commented Nov 21, 2021 at 11:36

Gifford N. · Accepted Answer · 2022-05-29 14:39:51Z

7

I had the exact same thought -- It's a pervasive issue in code reviews and seeing your question was enough to motivate me to create a PR request in the eslint-plugin-react-hooks package to get this functionality added.

In the meantime (it'll probably take a while before it makes it into a release) you can use the interim eslint plugin on npm:

npm install eslint-plugin-react-hooks-unreliable-deps --save-dev

and add the following to your .eslintrc.js:

...
extends: [
    "plugin:react-hooks-unreliable-deps/recommended",
    ...
],
...

I do hope this suits your needs, and please submit any feedback to the issues page!

answered May 29, 2022 at 14:39

Gifford N.

4286 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ESLint rule for Object & array dependencies in the React useEffect Hook

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related