Top 7 mistakes that React developers make

At the beginning of a career, each newbie has to overcome troubles and obstacles. React developers are no exception here because their field is difficult and it seems rather hard to avoid mistakes at the very start. We have consulted our middle and senior React developers about the mistakes that juniors and trainees make. So, this time let’s turn out attention to the top mistakes that React developers make.

Absence of micro-services

One of the most common mistakes of newbies is putting everything in one single file. In that way, they create a monolith structure of an app that is difficult to debug and handle because everything is in one place. The best way to avoid it and reduce the pains of developers that will deal with such a code in the future is to create separate components. These components can be imported into one place later and create a necessary page for an app. Moreover, when everything is split into separate components you will be able to debug and change everything in them in the most harmless way.

Direct modification of states

By design, all states in React are to be immutable. The mutation of states, objects, and arrays is a dangerous thing because it can lead to serious performance issues that will be hard to fix. React is not able to observe and commence re-rendering of the elements that have been changed but still have the same reference.

The most suitable way to fix that is to apply a useState() hook or just use setState() method. That will help React to identify your changes and allow DOM to re-render them correctly.

String instead of a number as the argument

To be honest, it is a trivial mistake that a lot of developers make. But it should be understood that such a tiny mistake causes a lot of trouble in the future.

For example, a component or function is meant to have a number as a prop, but it receives a string. Sure thing that will lead to an error because another data type is expected.

setState() is asynchronous

To be honest, sometimes even experienced developers forget about it, so no wonder a newbie does the same. What does it mean — asynchronous? That means that all the changes you provide won’t be displayed at the same time. They’d rather transfer to another render and then can be seen. Also, React will auto-batch the update calls and improve performance with it. As a result, if you forget about setState and its asynchrony, you’ll definitely receive bad results when trying to access a state value.

Sure thing, you can fix that. All you need is to pass an optional second parameter to setState(). It will work as a callback and be called after each change you provide.

Components name capitalization

Sometimes React developers forget to write a name of a component with a capital letter. This is a small mistake but it is very easy to make. That won’t harm anything badly but will cause some errors.

For instance, in JSX when a component is written in lowercase it is indicated as an HTML tag. Sure thing you will receive the error that will tell you, there is no such tag as “your component name”.

You can simply fix everything by just replacing the first letter of your component with a capitalized one.

Folder structure

Every developer has to understand that the work he does at the moment will be supported and maintained by other developers sooner or later. Also, you might have to change or improve something right there. So, when your files and folders are in a total mess it won’t easy to work on a project because it will take hours to bring everything in order and fulfill the necessary task.

In order to avoid wondering in your files, it is critical to stick to the standard React folder structure. All the elements should be sorted out and that will help you and others to change, scale and improve a project.

God components

God components are made up of monolithic, non-reusable parts. You shouldn’t pack all of your UI elements into one component when creating a page. Instead, spend some time outlining the various related sections of your app and turning each one into a separate component. All of the components of your program are simpler to maintain and reorganize as necessary when components are separated in this way.

Concluding

We are all human beings and making mistakes is fine for everyone. The main thing, especially for a developer is to learn from them and tend to remove them to level up the quality of work.

Look at our list, consider what mistakes you do, and try to avoid them in the ways we have represented to you.