5 Code Smells React Beginners Should Avoid

Make sure to double-check your pull request for these things before you submit

Photo by Priscilla Du Preez on Unsplash.

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…