javascript - ESLint rule for Object & array dependencies in the React useEffect Hook - Stack Overflow

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 municating it effectively with the entire development team and helping to make sure that everyone is aware to watch for this during code reviews?

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 municating it effectively with the entire development team and helping to make sure that everyone is aware to watch for this during code reviews?

• javascript
• reactjs
• react-hooks
• eslint

Share Improve this question Follow asked Jun 7, 2021 at 16:58 SuergSuerg 13388 bronze badges 7

• 3 Does this ESLint plugin from the React team satisfy what you need? npmjs./package/eslint-plugin-react-hooks – evelynhathaway Commented Jun 8, 2021 at 2:04
• 4 @evelynhathaway Thanks for the ment! 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 Commented Jun 8, 2021 at 14:00
• 1 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 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 Commented Nov 20, 2021 at 10:28
• 3 @pir I did find github./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 Commented Nov 21, 2021 at 11:36

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 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/remended",
    ...
],
...

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