Hey there 👋
In React development, many factors influence the overall performance of an application. One key factor is the efficiency of calculations. But how can we determine if a calculation is expensive? And why is it so important to know?
React developers, especially beginners, often overuse such hooks like useState and useEffect. Understanding whether a calculation is expensive can help you decide if state or effects are necessary, or if it is acceptable to re-calculate something on every render.
Let's get straight to the point with key factors to consider. By the end, you’ll have a clear checklist to help you identify costly calculations in your React projects.
Theoretical analysis
Time complexity
Constant time
O(1)
Operations like simple arithmetic or accessing a fixed element are considered cheap calculations.Linear time
O(n)
Iterating over a list once. The cost depends on the size of the list.Quadratic time
O(n^2)
Nested loops where each element is compared or processed multiple times. These are generally considered as expensive calculations.Exponential time
O(2^n)
Processes like deep recursion or brute-force searching. These are highly expensive calculations
Data size
- For small lists (< 100) - Calculations with
O(n)are usually fine and considered cheap. - For large lists (>1000) - Even calculations
O(n)can become expensive.
Practical test
Browser performance monitoring
Console timing
console.time('name-of-the-process')
process code (calculation)
console.timeEnd('name-of-the-process')
If the time is less than 1-2 ms - the calculation is considered as inexpensive.
Performance tab
The browser's performance tab provides a lot of useful information. While I'm not going to describe it in this article (it deserves its own article), I recommend to learn more about it.
Frequency of calculation
Even if a calculation isn't expensive, if it's being performed extremely frequently, it can still contribute to performance issue.
User experience and performance bottlenecks
The user experience is the best indicator of performance. Ask yourself: Is UI sluggish and unresponsive or smooth and responsive?
If your app has issues in these areas, it might be required to optimize expensive calculations.
Conclusions
I hope the topic became clearer for you. This article is a start to further exploration and learning about React and performance. Consider learning about React's optimization techniques like useMemo and React.memo, diving into browser performance tools, or strengthening your understanding of algorithms and data structures.
Top comments (2)
Even didn't mention what impact React performance the most - rerenders, e.g. every times when call
setState.Because on every re-render need to recalculate most of things.
Hi! Thanks for the comment. I'm just learning how to write articles and sometimes I miss to say some obvious or self-evident things. I wanted to share the points I made in the article, obviously failing to write a proper introduction explaining why all this is important.