- Let’s start with the first mistake – inefficient project file structure. When you start building your project for the first time, when you’re building your folder structure and you’re organizing your files and everything. There is no right way to do it, if it’s working for you then it’s a good structure. That’s how I look at it because of the multiple ways to do it. The first rule of thumb is if something is only going to be used by that component or that file then it should stay next to it. For example if you have a CSS file that only applies to one component then he should stay with it. You need to test if it applies to that component which usually is, it should stay there. Anything that applies to multiple components should stay a little bit higher because they can access it much easier. Whenever you create a new project there are multiple ways to organize your faults. You can find a standard folder structure and for sure follow that.
- Duplicate Code. The power of ReactJS is in its components because you can componentize everything. However, a lot of people make modern a-take applications which means you have one page and they put everything in one page or even if they have components they do not componentize things enough.
- The next mistake people make is putting business logic in reusable components. Typically what you wanna do is all the business logic should go in the page, not the underlying components. Most of the components should be dumb enough. If you have multiple components that are using that business logic you can provide it. If you build your component as dumb as possible you can reuse it everywhere else.
- Next one is using Redux to manage all the states. Whenever you have a giant project, you need to identify your data, manage that through Redux or some other global state management.
- Fifth mistake is quite powerful – not using the right lifecycle method. So I would suggest understanding every single lifecycle hook and how it works, and what are the main and the most essential things you can do. There are some lifecycle hooks that should be rarely used and ReactJS actually says that, but if you just use them randomly then it could create problems for you.
- Not having Unit Tests. If you have a large project, you definitely must have and provide the unit testing for your components. Why do you need to have and provide unit tests? So, you would have a nice regression.
- Not using prop-types. Defining the types via the prop-types package is the most reliable way of making sure you send the right props. Prop-types are used to document the intended types of properties passed to components. React will check props passed to your components against those definitions, and warn in development if they don’t match.
- Not using helper classes or functions. In addition to reusable components, we also have reusable functionalities in our applications. This functionality is often hard coded on a component-to-component basis, which leads to inefficient and inconsistent behavior between similar components. All container components contain logic to grab a resource, save it to state, and manage errors. Most times, this behavior is the same from one container component to another, but it can behave inconsistently when not written properly. Consider the example above where we make an API call to grab a resource, set the state, and also handle errors. If we extract that behavior to a helper class or function, we can reuse the same logic for API calls, setting state, and error handling.
- Not planning before coding. The substantial amount of work should go into planning and if you don’t do that you will suffer later. It is always hard to plan the project architecture when you are a beginner. Sometimes due to short deadlines. You didn’t give enough time to project architecture. And most of the big problems are because of such things. While defining project architecture you have to consider how really big your application is. Writing code without thinking of its architecture is useless in the same way as dreaming about your desires without a plan of achieving them. So I would suggest before you start building your React project – plan it!
- Not keeping up with upgrades. A lot of people don’t upgrade their application to the latest version. I would suggest frequently upgrading – every 6 months. If you have a project, create a plan. It takes maybe a week to focus on an upgrade and run all the tests. Also, make sure that everything is fine.
Developing ReactJS applications can be difficult and people make some mistakes. In this article I wrote about some common mistakes. We also discussed approaches and tools that may make the process more efficient and less painful. Make fewer mistakes and happy coding!