This week: Performance!

How can you boost performance in your React application? Is your app slow and you can't figure out why? This week's newsletter is all about how to improve the performance of your React app.

Slow performance in web-apps is often caused by 1. downloading large assets or 2. updating a large part of the DOM too frequently.

Below you’ll find some libraries that help in both those cases. We can use ​lazy loading​ to load assets only when we need them. We can use ​lazy rendering​ to put only visible elements in the DOM.

Another new performance feature folks are using are web workers. With web workers we’re able to delegate processing off of the main thread. Below you’ll find a library to take advantage of web workers and speed up the Virtual DOM reconciliations.

The most important thing to do when optimizing apps is to ​measure performance​. Often we find one or two areas are taking up 80% of the runtime of our app. When are apps are getting slow, Chrome has a robust set of dev tools that we can use to diagnose where the problem is. Below you’ll find a tutorial that walks through how to use them.

-Nate & Sophia

 

Tutorials

Code






About


Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).


Follow us on Twitter


Curated with love by Nate Murray, Sophia Shoemaker and the Fullstack.io team.

Suggestions are welcome, just reply to this email - we'd love to hear from you.