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. 🚀
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.
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.
Prevents you from opening up a dangerous security loophole as this can execute any unsanitised code. More details here.
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.
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 🧹
This rule avoids a lot of bugs that might occur because of the hooks that we write without passing proper and required dependencies.
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.
This has been mostly helpful when I use class instead of className in my code even after 15 months of writing React every day. 🥲
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.
Helps you to structure and write cleaner code
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.
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.
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.
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. 🙌
Top comments (0)