Member-only story
5 Code Smells React Beginners Should Avoid
Make sure to double-check your pull request for these things before you submit
As a mentor to frontend beginners who have come from a myriad of different backgrounds, including bootcamps and other non-traditional education paths, I have observed many different approaches to coding in React. Part of the beauty of React is that it is generally pretty unopinionated relative to frameworks like Angular and Vue. This makes it flexible enough to plug into lots of existing code bases written in different frameworks. Additionally, it inspires a plethora of community libraries for different use cases, thereby pushing the whole industry forward.
However, the downside to convention-agnostic, configuration-heavy ecosystems is that it leaves a lot of room for beginners to stray from best practices. Below are five oft-violated best practices — or code smells — that I often find when reviewing pull requests from new React developers.
It should be noted that a “code smell” in this context is just a pattern I notice that draws my attention for further scrutiny. It does not mean that these are always improper implementations. There are no absolute rules in good software engineering. Every one of these code smells could make sense given the proper context in exceptional circumstances. That being said, if you find yourself using these patterns, you should stop and ask yourself, “Is this really necessary?”
1. Mutable Variables
In the past five years, I have only had to use a mutable variable once — like I said, there is an exception for every best practice. Mutable variables are variables that can be re-assigned throughout the execution of your code. Those variables in JavaScript are let and var. If you are using ES6 syntax, you likely will never want to use var, but I still find many React beginners using let.
When reviewing a pull request, seeing any variable that is not a const variable in React informs me that the developer is likely most familiar with procedural design patterns. The Accumulator Pattern is one such example of a procedural design pattern utilizing a mutable variable that I see many beginners using. Almost every design pattern that uses a mutable variable can be…
