ESLint rules that made me a better React developer

Photo by Lautaro Andreani on Unsplash

I have been writing React code for about 15 months now and it has been an exciting journey where I get to learn new and better things around React even today.

Failing fast is something I personally value, and recommend fellow developers all the time. Having static code analysis in your repository will help you write cleaner code, find bugs earlier and reduce your overall cost overhead. 💸

Here, I listed out few ESLint rules we use in our repo at Marvin, that has been very helpful for us in writing secure, cleaner, bug free and maintainable code with better performance. 🚀

Security 🛡️

react/no-danger

This rule prevents you from writing insecure code. For example, this rule will throw an error if you dangerously set HTML without sanitising the input. More details here.

react/jsx-no-target-blank

This rule prevents you to add hyperlinks without creating security vulnerabilities. Your new window that the hyperlink opens can still have reference to the old window object. More details here.

react/jsx-no-script-url

Prevents you from opening up a dangerous security loophole as this can execute any unsanitised code. More details here.

Maintainability 📒

prefer-spread and react/destructuring-assignment

This rule has been very helpful while cleaning up code and updating components. It becomes easy to find redundant prop variables or variables in general and clean the code when restructuring. More details here and here.

react/jsx-props-no-spreading

This rule makes sure that you know exactly what props are passed to the child component, thus making sure you won’t pass any redundant props to your components. This would in turn reduce the number of re-renders in the component. More details here.

Clean Code 🧹

react-hooks/exhaustive-deps

This rule avoids a lot of bugs that might occur because of the hooks that we write without passing proper and required dependencies.

react/default-props-match-prop-types

Very helpful if you are trying to inculcate writing modular and reusable code across the application.

react/no-unused-prop-types and react/no-unused-class-component-methods

Helps you in cleaning up redundant props and component methods that are not being used in your code anymore.

react/no-unknown-property

This has been mostly helpful when I use class instead of className in my code even after 15 months of writing React every day. 🥲

react/sort-prop-types

Every developer who writes code will have his own priority of passing props in a component. This gets complicated with time and on onboarding new developers. But one thing that is constant for all developers is the alphabetical order. This rule will make sure that developers structure and maintain props on components using a single alphabetical order.

react/jsx-curly-brace-presence

Using both jsx expressions and javascript string literals will make simple things complex while writing code, at least in the initial days until you get a grip of using both in React. This rule would help you to quickly figure out bugs, incorrect code, unnecessary braces and helps you to simplify your code. More details here.

react/jsx-curly-newline

Helps you to structure and write cleaner code

promise/always-return

This rule has not only helped us to write cleaner code but also safely and properly handling asynchronous code in our react application. More details here.

Performance 🚅

react/no-array-index-key

If an array item is added at the beginning of the array then using the index as a key will re-render all the items in the array. This rule prevents us from using the array index as a key. Learn more about React keys here.

react/jsx-key

Keys in React identify which items in a list are changed, updated, or deleted. This rule detects if a key is needed for an element. You can learn why a key is needed from here.

react/jsx-no-constructed-context-values

This rule prevents unnecessary re-renders by suggesting us what all variables can be memoized in our application. Initially I often used useEffect and useState and wasn’t aware of useMemoor how to use it. but once I learnt how to memoize my variables, I was able to prevent a number of re-renders throughout my application. You can find more details in here.

These are some of the ESLint rules that we have enabled in our repo to write cleaner, maintainable, secure and bug-free code with better performance.

Know any other rules that could help write better react code? Comment below and help your fellow React developers. 🙌