In this article we gathered a number of the most common mistakes made by application developers. You can ask for help of a professional to click here to avoid them. Although we are using React in this tutorial, most of the techniques discussed here can be applied to other environments.
1.Don’t focus only on your work.
If you spend all the time writing code, you can forget about the developer community. What if the programming process is inefficient and you don’t even know about it? This can be easily avoided by communicating with other developers.
2.Don’t use .bind instead of class component constructors.
Most developers think they should use .bind with class methods. This works well with arrow functions. There are problems with inline functions. They are rendered and are props for the child. When this happens, React assigns a new instance of the function with each re-render. This significantly reduces performance. React apps are designed to be composite.
3.Don’t pass dynamic values as keys for children.
Sometimes it seems that giving unique keys to children is not necessary. In fact, they are very useful.
Due to the fact that the generated key is always different, React recreates all the nodes every time it is rendered.
We often face the situations where we need to render a list of items. Keys work like identifiers. And in order to identify a component, all keys must be unique.
4.Don’t declare default parameters instead of null.
Default functions allow named parameters to be initialized with default values if they are undefined or equal to zero. Such errors take a very long time to debug.
5.Don’t ignore duplicate code.
Frequently, you just want to copy and paste duplicate parts of your code. Especially when the deadline is close, and the fix is needed right now.
It is more convenient to use slightly different props instead of repeats.
This allows you to extend any part of the component without changing the original implementation.
6.Don’t initialize props in the constructor.
Often state is initialized in the constructor. The result of this approach is often accompanied by bugs. This is because the constructor is called only once when the component is created. So when the props change, the state remains unchanged.
7.Be aware of the dangers of conditional rendering with && .
A very common mistake is using the && operator in conditional rendering. React will try to render all alternative results if the condition fails.
8.Remember to spread past states.
If you implement the logic of updating the state carelessly, then bugs will inevitably arise. This is especially dangerous in long code. Past states are easy to forget, but they can often save you during reactjs development.
9.Pass props to children.
There are several reasons for this:
- Easier debugging process.
- Understanding exactly what each element is for.
- Fewer props are needed for rendering.
Despite this, sometimes spreading props is useful. For example, if the parent component needs to do something before passing. However, if something goes wrong, try splitting one component into several.
10.Prop drilling.
Prop drilling is when a parent component passes props to several children at once at different levels of the tree. The problem is not in the parent, not in the child, but in what is in between. When re-rendering the first one, all children are also rendered in turn. To avoid this, you can use context or redux.
The Redux developer tools also include many features that allow you to see every action that occurs, view the state changes caused by those actions, and jump to them before certain actions have occurred.
