How I managed to improve performance by 28x in a React application
Ionut Preda
I help SMEs streamline their processes with tailored software solutions—without breaking the bank ? Senior Software Developer ? React
The React application I am referring to now is in the Banking industry and already in production.
The client faced these performance issues when large data sets were loaded on an essential flow in the application.
What happened then? One of two things:
1. The application has a freeze of tens of seconds, even minutes OR
2. The application crashes
How did I identify the root cause?
I couldn't identify the root cause… because there were multiple causes.
However, the biggest problem was related to that datasets' validations.
These validations took 112 seconds or almost 2 minutes for that specific data set.
Waiting 2 minutes for the information to load on the user interface it's a terrible user experience (unless the application crashes in the meantime).
How did I optimize this?
I realized that the validations are not necessary on absolutely all elements, so the first step was to avoid validating the unnecessary.
The second step was a more technical solution.
领英推荐
The validation method compares (at some point) if two objects are the same (in the past with lodash's "isEqual" method).
I realized that I only needed two fields (of the object) to be compared, so I removed the "isEqual" method and compared the two fields manually.
What results did I get?
Hold on tight…
I reduced the validation time from 112 seconds to 3-4 seconds on that data set. So the loading speed is now 28x faster.
When I saw the difference, I couldn't believe how much 1-2 changed lines of code matter.
The other issues I dealt with were related to the user experience after the data loaded, but I overcame the most critical blocker.
What did I learn from this?
1. A reconfirmation: any line of code matters.
2. When you write code too fast (or irresponsibly), you create technical debt, which only aggravates the application's state in the future.
3. An effect can have several causes.
4. Another reconfirmation: it's very satisfying to leave behind a more stable application than before!