React is a powerful Front-End library to build SPAs (single-page applications). React has become quite popular in recent years, thanks to its helpful features like the ability to break the UI into small reusable components instead of having a massive boilerplate of HTML per view, the benefit of fetching information asynchronously, only refreshing a specific part of the UI instead of a full-page, and the flexibility to build anything you want. However, all this flexibility could present problems as well.

React is built on JavaScript, which is flexible but prone to errors: incorrect references (what is ‘this’?), no block-level scopes, memory leaks, and many more risks; despite these risks, React allows you to do pretty much anything you want, but that doesn’t mean it is perfect.

Think of a small task such as carrying cement bags from one place to another. You can carry one by one with your hands, or maybe use a wheelbarrow or a lift truck. All of them will get the job done, but some ways are better than others.

The 6 Most Common Mistakes in React that can Lead to Defects

Component with Multiple Purposes

Components should be simple and reusable. If you find yourself saying, “my component does this and this and this…” when you try to explain its functionality, then it’s a good sign that you should break it into smaller components. Think of a swiss army knife; your components should be the individual blades and tools, rather than the whole knife.

Passing Down Useless Props or Objects

Avoid passing down props deeper than two levels. Make sure only to pass down the properties that will be used. Passing down extra properties causes unnecessary re-renders on the child component if something changed on a prop that is not being used. The same can be applied for objects; if you only need one or a few properties from an object, pass down only those properties instead of the whole object.

Key not Assigned

By giving each list’s element a unique key, React can tell them apart when comparing what needs to be re-rendered.

Mutating States or Props

Take the following example:

User is assigned to tempUser, and then tempUser is modified. Later on, setUser is called to update the state. Apparently, everything is correct. However, if setUser was not called, you will find that the user age is already 25; the state is mutated. It will help if you avoid this to prevent weird behavior on your components. Mutating states are caused by assigning an object into a new variable; a reference to the first object is assigned as well. You can easily solve this by creating a new object by using the spread operator.

The same can be applied to props. Instead of receiving a prop and directly updating it, a function to update it should be passed and used to update the prop.

Avoid Declaring Inline Function Definition in the Render Function

Functions are objects in JavaScript. Inline functions will always fail the prop diff when React does a diff check. The arrow function will create a new instance of the function on every re-render if it’s used as a property.

Instead, declare the function outside of the render.

Improper Array Handling

Avoid doing the following: if there are no items, then SubComponent will re-render every single time:

Instead, you can use the following to prevent it:

Bonus: 2 Redux Common Mistakes

Redux is widely used in combination with React for complex applications, so it is worth mentioning some common errors to avoid when working with Redux.

Not Batching Actions

If you need to set different values and actions for a component, then it’s best to batch them. Each dispatch will create a re-render of the component using the properties updated by the actions.

Forgetting that Redux is One Single Switch

Redux’s combineReducer function will combine all reducers you have created in your project. It is important to remember this to prevent having cases with the same name on different reducers. It is also vital to avoid declaring variables on the reducer. Since the switch’s cases won’t keep the scope for the variables, they will be accessible from other cases, which could create some unwanted problems.

Conclusion

React is an excellent tool to use! You need to be careful when using it to avoid any nasty problems down the road. It’s easier to prevent a problem than trying to fix it later on when there are many dependencies on it. Also, as a side recommendation, in addition to Unit Test, I recommend you automate your end-to-end tests to catch these defects before going to production.

Nilson Lagos