react.dev icon indicating copy to clipboard operation
react.dev copied to clipboard

[Suggestion]: Change recommended React linting plugin

Open thernstig opened this issue 5 months ago • 5 comments

Summary

Change recommended React linting config eslint-config-react-app to eslint-plugin-react.

Page

https://react.dev/learn/editor-setup

Details

This text probably recommends the wrong config:

Make sure that you’ve enabled all the eslint-plugin-react-hooks rules for your project. They are essential and catch the most severe bugs early. The recommended eslint-config-react-app preset already includes them.

If using the new ESLint flat config format, it is better to use the configs included with https://www.npmjs.com/package/eslint-plugin-react.

Essentially I think the paragraph should recommend both eslint-plugin-react and eslint-plugin-react-hooks.

thernstig avatar Aug 20 '25 15:08 thernstig

cc @poteto, I'm not super familiar with the differences between the two.

Maybe instead of "recommending" one of the configs, we can just say:

presets like eslint-config-react-app and eslint-plugin-react already include them.

rickhanlonii avatar Sep 02 '25 17:09 rickhanlonii

https://www.npmjs.com/package/eslint-config-react-app is just outdated, and eslint-plugin-react and eslint-plugin-react-hooks are the ones to use. It aligns with that create-react-app is not to be used anymore, but rather a framework or similar. Next.js only has the two latter. Also eslint-config-react-app and the usage example is deprecated in the latest versions of ESLint and will even be removed in the next version.

thernstig avatar Sep 03 '25 06:09 thernstig

Yeah makes sense to not recommend the outdated plugin, but a lot of users are still using it so it's good to note that it supports eslint-plugin-react-hooks out of the box.

rickhanlonii avatar Sep 03 '25 14:09 rickhanlonii

We should definitely update this to remove eslint-config-react-app. The primary linter that we recommend is eslint-plugin-react-hooks — in the upcoming major version it includes multiple critical correctness checks from React Compiler that all developers should use.

As for eslint-plugin-react — that package is not officially maintained by the React team and we have not vetted the rules. We can take a look and consider whether we think it makes sense to also recommend.

josephsavona avatar Sep 03 '25 15:09 josephsavona

@josephsavona just a note that eslint-plugin-react is one of the recommended ones for e.g. Next.js: https://nextjs.org/docs/app/api-reference/config/eslint and it has 25 mill downloads, so it is a great plugin. But of course vetting is is always reasonable.

thernstig avatar Sep 04 '25 13:09 thernstig