Add Linting to Help Enforce Rules when Using React Hooks

Share this video with your friends

Send Tweet

In order to use Hooks there are a certain set of rules you need to follow. Thankfully, the React Team has provided an ESLint Plugin that will help enforce these rules when using Hooks.

Gonzalo Pozzo
Gonzalo Pozzo
~ 6 years ago

It's really necessary to eject for configuring ESLint? I always used my own config in CRA using an eslintrc.js file without having to eject

Elijah Manor
Elijah Manor(instructor)
~ 6 years ago

Gonzalo,

Yes, you can add your own local eslintrc file, but it won't be used in the dev server or build system. A local eslintrc file will only apply to your IDE (Code, vim, etc...).

If you want create-react-app to know about your custom rules you need to eject. You can see some of the background here https://github.com/facebook/create-react-app/issues/808#issuecomment-252941815

Gonzalo Pozzo
Gonzalo Pozzo
~ 6 years ago

Great!, thanks

Robert Reed
Robert Reed
~ 6 years ago

It appears you can now add react-hooks linting rules without ejecting.

Installing react, react-dom, react-scripts, and eslint-plugin-react-hooks all with @next and providing the eslintConfig in the package.json as shown provides the expected behavior.

Elijah Manor
Elijah Manor(instructor)
~ 6 years ago

Robert, version 3.0 of create-react-app just came out https://github.com/facebook/create-react-app/releases/tag/v3.0.0 and it now supports the react hooks ESLint rules out-of-the-box... so ejecting isn't needed anymore. I was waiting for this release before re-recording this lesson. I didn't like having to eject because that is messy and makes upgrading harder. Thanks for watching!

Michael Friedman
Michael Friedman
~ 5 years ago

Maybe delete this clip now, no longer relevant.

Elijah Manor
Elijah Manor(instructor)
~ 5 years ago

Michael, yeah... now that it's supported in CRA I plan to redo this video and instead focus on what value the lint rules provide (also including the exhaustive-deps rule). Thanks for the feedback!