Feature: Sort React Hook Dependency Arrays

[stevensacks]

Describe the rule

First off, amazing plugin. I just discovered it today. I've been using separate sorting plugins and now I can just use perfectionist!

React Hook dependency array order has no effect on functionality. In keeping with sorting everywhere else, I wrote my own ESLint plugin to sort them.

https://github.com/stevensacks/eslint-plugin-sort-react-dependency-arrays

It seems like this functionality would be a natural addition to your great library. Perhaps you'd consider adding it? Thanks!

Code example

Before:

useEffect(() => {
  // ... some code
}, [t, isSubmitting, success, error]);

After:

useEffect(() => {
  // ... some code
}, [error, isSubmitting, success, t]);

Additional comments

No response

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[azat-io]

Thank you for your issue!

We don't plan to support things specific to any tools or frameworks.

Nevertheless, I find your idea a good one. I recommend you to create a similar issue in the eslint-plugin-react repository.

[stevensacks]

I’m not sure I understand what you mean.

You have rules for Vue and Svelte and Astro and React/JSX

[azat-io]

JSX support is built-in to ESLint.

We plan to deprecate support for Vue, Astro and Svelte in favour of their respective plugins.

Read more:
#175

[stevensacks]

Ah, ok. I understand. Thanks for taking the time and for making this plugin. I included it in a series of articles I wrote about ESLint rules.

https://react-japan.dev/en/blog/eslint-sorting

[azat-io]

@stevensacks Wow, that looks cool. Thank you so much for your support!

[gajus]

For React, you can use https://github.com/gajus/eslint-plugin-canonical?tab=readme-ov-file#sort-react-dependencies

(I am deprecating other sorting rules for this plugin)

[stevensacks]

Thanks. I’m going to use a few of your rules, as well!