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
A Deep Dive into React Perf Debugging
In this article Saif Hakim takes a deep dive into React's performance tools, common React rendering bottlenecks, and a few tips for debugging. One of the best tools for debugging React is using the normal Chrome Devtools.
Here Saif shows how to use the Timeline profiler in Chrome's dev tools, which gives a detailed profile of what the browser is doing: handling user events, running JS, rendering and painting.
benchling.engineering
Code
Using Web Workers with React
JavaScript runs in a single threaded environment which means only one script can run at a time. Using web workers allows us to run scripts in the background without affecting performance in the browser. In this blog post, Parashuram N. discusses his experiments using web workers to speed up React's virtual DOM reconciliations.
nparashuram.com
Optimizing React performance using keys
This blog post is part 1 in a series of posts on simple ways you can boost your React app. Part 1 discusses different approaches to using different types of keys in lists of components. Click the link to find out which approach is optimal!
jaero.space
Lazy loading your React components and images
This is a React add-on that allows you to lazy load components and images to boost performance.
github.com
Virtual List - only render list items that are visible on the page
Similar to the lazy load add-on, this virtual list React component makes it possible to load a large amount of items on a page, but only render what's visible in the viewport.
github.com
React and Web workers
This React library allows you to take advantage of web workers and speed up Virtual DOM reconciliations.
github.com
react-i13n: automatic instrumentation for your React application
Manually adding tracking code to every onClick handler or button press is a pain. This library from Yahoo simplifies that process. You tell the library which analytics platform you're using and it handles the rest.
github.com
About
Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends
fullstackreact.com
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.