Five Most Common Mistakes with React.js

Hello to all readers.

Today I would like to share a part of my experience, or rather its “dark” side, namely the mistakes when using React.js in development. Sometimes these are gaps in knowledge, and sometimes simple inattention, but I am sure that every programmer has encountered them. Some they made themselves, and some they only noticed in someone else’s code.

1. Incorrect use of useEffect.

What could be as common and simple as this hook? In real life, it is a true magnet for potential problems and bugs. useEffect itself is a hook for functional components that allows them to perform various side effects. The most common mistakes with it: calling the effect without a dependency array, as a result of which an infinite effect rerun occurs; adding absolutely all possible variables to the dependency list; performing component logic or calculations inside the hook; forgetting to clean up the state after a subscription; using useEffect instead of useLayoutEffect; using several useEffect hooks that depend on each other. As a result of this, the product has issues: memory leaks; duplicated requests; extra renders; unstable or unpredictable functionality.

2. Creating anonymous functions directly in JSX.

<Button onClick={() => doSmth()}> Click </Button>
This mistake may not be very obvious, but when scaling a project it begins to consume a lot of resources. This happens because on every render React will create a new function. As a result, we get unnecessary renders of child components, performance issues. It is best to memorize them or move the functions out.

3. Incorrect key in lists.

A very simple mistake, and therefore very common. Keys are identifiers of elements by which React
understands the correspondence between the data and these elements. Mistakes with keys often lead to
strange animations, odd UI bugs when adding or removing elements, or simply incorrect values in elements (inputs). The best practice is to use stable keys.

4. A huge component for all occasions.

I often encounter giant components (combines). They are simply huge, 4k–5k lines and more, and they contain absolutely everything: forms, filters, modals, render logic, business logic, etc. Everything is mixed, and often they also have a huge state with endless conditions of changes. This is a huge problem for testing and maintenance, as well as for reading. As a result, technical debt grows, unexpected re-renders and behavior appear, and it becomes impossible to scale the UI further.

5. Ignoring memorization – useMemo, useCallback.

These tools are great, they allow the developer to increase the performance of the product. Without them, there will be endless unnecessary renders, constant performance issues in large products, especially noticeable ones. At the same time, there is another problem – memorizing everything in a row. This is also not good and often leads to restricted re-renders where they were needed, data stops updating, etc.

This is far from the full list of mistakes, otherwise this section would stretch for several more pages. This is my personal ranking of the most common mistakes; everyone may have a different one and that is normal.

In conclusion, I would like to say that you should not be afraid of mistakes. Mistakes are our driver for self-analysis and improvement of our work, deepening our knowledge of the tool we use. As the folk wisdom says – “He who does nothing makes no mistakes.”

One thing that will never be a mistake is finding the right technology partner for your business. To discover more about how our company can help your company, schedule a free assessment.