Do React’s hooks improve app performance?

Piotr Pozniak
The Startup
Published in
4 min readApr 14, 2020

In the React’s documentation, you may read:

Unlike componentDidMount or componentDidUpdate, effects scheduled with useEffect don’t block the browser from updating the screen. This makes your app feel more responsive. The majority of effects don’t need to happen synchronously.

I had one web app to upgrade, so it was an excellent opportunity to check whether the sentence above is right, especially about the “more responsive” part.

Old vs New Drag Racing (https://www.youtube.com/watch?v=XGTglMCMnb0)

The app I was upgrading was running on React v16.2.0, whereas of the time of writing this, the current version of React is 16.13.1. When approaching this upgrade, I asked myself a question about what benefits I will get after upgrading the app. These upgrades are usually something the client does not want to do. If you can’t convince them with security arguments, then probably nothing will. My biggest question was how upgrading the framework and refactoring the code to fulfil the latest best practices will impact on the app performance. Of course, that was not the ultimate reason I decided to upgrade the app.

The codebase of the app was relatively small. It took me around 6 hours to refactor the code. Key challenges were:

- use hooks instead of component*() callbacks;
- refactor classes to arrow function components;
- refactor build configuration to work with new `create-react-app` architecture and scripts;
- ensure all upgraded dependencies work correctly, and the app functionality didn’t break.

It was a little weird to start using hooks. I liked the classes, and I used inheritance in a couple of cases, despite what Facebook claims, I did find a use case of this. Yet, the new layout of components looks more compact and simplified and I think I like it.

Performance testing approach

The quickest and the most convenient way for me to measure the performance was the Lighthouse Performance test. I realize it’s not the best way to measure the performance. It’s like comparing which car is better judging only on the quarter-mile race. But these tests were not my primary concern doing the upgrade. I just wanted to know whether the performance would improve.

The Lighthouse gave me different Performance results per each test, even if I don’t change anything. So to have a better judgement of the performance, I run 10 tests per each change. Then calculate the average result and treat it as the final result. For comparison, I will also show the worst and the best results I’ve achieved.

All tests were performed on production build running on my local. The fact that the files were hosted on my computer for sure harmed the timing and performance result. It is probably due to all the file listeners tools. I was running while doing tests. The performance test result was way different on my local than what I could see on the production server.

Performance test 1 — old version

Before jumping into code refactoring, I ran some tests with The Lighthouse performance test tool. The results were at least unsatisfactory, but the framework upgrade and code refactor was about to change it.

Old version, the worst result

As mentioned earlier, the app had a weak result in the performance test. The average score was 25. The best result I’ve achieved was 31, and the worst was 19.

Old version, the best result

Performance test 2 — app hooked to effects

After around six hours of working, I finally was able to re-run the performance test. It was not less exciting than opening the Christmas presents- you get the idea. So I’ve made the codebase of the app by the book, and, according to the React’s documentation, the app should feel more responsive. Did tests confirm that? Yes. The performance test results ranged from 21 to 52, with an average of 34.

Upgraded version with hooks, the worst result
Upgraded version with hooks, the best result

Conclusions

It’s always good to upgrade the app dependencies as it improves security and makes additional improvements easier. Running upgrades regularly allows lowering the cost of the maintenance.

Upgrading React to the latest version and applying hooks indeed improves the app’s performance but don’t expect to be blown away. You may notice performance improvement, but it won’t be a dramatic change.

--

--

The Startup
The Startup

Published in The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +772K followers.

Piotr Pozniak
Piotr Pozniak

Written by Piotr Pozniak

Full-stack software architecture and development, project management and business process optimisation with bespoke software. Entrepreneur, SaaS co-founder.

No responses yet