React Performance

Articles & Tutorials

Improve React Native performance with immutability (blog.logrocket.com)
Oct 31, 2019
React Native SlowLog is a tool suitable for bigger performance problems in React Native.
  • Daniel Idaszak
How to Implement Idle Timeout in React (blog.bitsrc.io)
Oct 10, 2019
Learn how to use idle-timeout in your React app to improve performance and security.
  • Bhargav Bachina
10 Tips & Tricks for smaller bundles in React apps (itnext.io)
Sep 27, 2019
In this article I’ll attempt to share a few tips & optimization tricks that you should consider when aiming to minimize the footprint of your React app.
  • Aggelos Arvanitakis
Performance Testing React With Anonymous Functions (matthewgerstman.com)
Sep 26, 2019
Over the past couple of years, anonymous functions have really taken off the React community.
  • Matthew Gerstman
State Colocation will make your React app faster (kentcdodds.com)
Sep 24, 2019
How state colocation makes your app not only more maintainable but also faster.
Why You Rendering, React? (itnext.io)
Sep 19, 2019
However you put your app together, it’s always a good idea to ensure your components and state changes are triggering re-rendering as expected. That’s especially important if you have costly components to re-render.
  • Cheri Hung
Profile a React App for Performance (kentcdodds.com)
Sep 16, 2019
How to use the React DevTools and React's profiling build to properly profile a production app.
Simplifying state management in React apps with batched updates (blog.logrocket.com)
Sep 10, 2019
After making an update to your component’s state using either useState or this.setState, parts of the component re-renders depending on the update.
  • Peter Ekene Eze
Tips to Enhance the Performance of Your React App (freecodecamp.org)
Aug 27, 2019
Building a great UI with React isn’t enough, You’ve got to add that extra glitter to make the app more polished, functional and remarkably better than the competition. This is exactly what I’m going to help you with as I describe some key methods to increase performance in React apps.
  • Shifa Martin
Getting to Grips with React.Memo (alligator.io)
Aug 15, 2019
React.memo gives us the ability of pure components in React but for functional based components rather than class based ones.
  • Paul Ryan
You’re overusing useMemo: Rethinking Hooks memoization (blog.logrocket.com)
Aug 14, 2019
In my experience, there are two main categories where I’ve found useMemo to be irrelevant, overused, and likely harmful to the performance of your application.
  • Ohans Emmanuel
Tracking the Performance of Complex Components in React-Native (medium.com)
Aug 12, 2019
The react-native community has come up with good advice and tools to master the performance of react-native apps, such as learning about frame rates and how to use systrace, understanding over-rendering (also here), or using the Profiler component within react-native.
  • Miguel Albrecht
Investigating Discord’s React Memory Leak (blog.discordapp.com)
Aug 08, 2019
Back in November 2018, on a what we’ll say was a rainy day for the sake of setting a mood, we employed a seemingly routine React upgrade. This upgrade led us on an unexpected journey through our codebase, the Chrome memory inspector, and the React source code.
  • Paul Shen
Getting Started Optimizing a React Native App (blog.usejournal.com)
Jul 23, 2019
I’ve worked for a year optimizing one of the largest banks mobile apps performance. We ended up getting it from 14s TTI to around 2.5s on a slow Huawei P20 Lite. Here is what i wish i knew before starting!
  • Thomas Kjær-Rasmussen
Getting to Grips with react-window (alligator.io)
Jul 22, 2019
In the frontend development community, we tend to use the word performance quite a lot. We all have the common goal of having a performant application. Brian Vaughan developed react-window with this in mind and he did a great job of giving us a powerful tool to achieve this goal.
  • Paul Ryan
Effortless render optimization with state usage tracking with React hooks (blog.axlight.com)
Jul 21, 2019
useContext is not specifically designed for global state and there’s a caveat. Any change to context value propagates all useContext to re-render components.
  • Daishi Kato
Use React.memo() wisely (dmitripavlutin.com)
Jul 17, 2019
To improve user interface performance, React offers a higher-order component React.memo(). By memoizing the rendered output, React skips unnecessary re-rendering.
  • Dmitri Pavlutin
Optimize Your React Functional Components with useCallback and useMemo (blog.bitsrc.io)
Jul 01, 2019
Learn how to use useCallback and useMemo to optimize performance.
  • Chidume Nnamdi
7 optimization techniques in React (blog.logrocket.com)
Jun 30, 2019
One key factor for positive user experience is speed i.e how much time a user has to wait to first see contents from your website or application.
  • Ogundipe Samuel
Next.js vs. Create React App: Whose apps are more performant? (blog.logrocket.com)
Jun 27, 2019
What are the performance differences between Next.js and Create React App? Let’s unpack that question with some data, but first, we need to understand what exactly we are comparing here.
  • Sean Connolly
One simple trick to optimize React re-renders (kentcdodds.com)
Jun 24, 2019
Without using React.memo, PureComponent, or shouldComponentUpdate.
How I made my React app 4 times faster (hackernoon.com)
Jun 05, 2019
Techniques you can implement to make your React app blazing fast.
  • Dominik Tarnowski
When to useMemo and useCallback (kentcdodds.com)
Jun 04, 2019
Performance optimizations ALWAYS come with a cost but do NOT always come with a benefit. Let's talk about the costs and benefits of useMemo and useCallback.
React Native Performance: Do and Don't (hackernoon.com)
May 31, 2019
This article is based on two years of experience building Nelio React Native Mobile Apps, available on iOS and Android.
  • Maxence Dalmais
Improve Your React App Performance by Using Throttling and Debouncing (blog.bitsrc.io)
May 23, 2019
Learn how to improve performance by implementing throttling and debouncing with lodash, underscore or RxJs.
  • Chidume Nnamdi
Ending the debate on few anti-patterns in React (medium.com)
May 11, 2019
If you aren’t measuring, you can’t even know if your optimizations are better, and you certainly won’t know if they make things worse!
  • Nitesh Soni
Performance Profiling Your React App (telerik.com)
May 06, 2019
In this article, we'll learn how to profile the performance of React apps using React Profiler, and leverage it to discover performance issues.
Improve React App Performance Through Memoization (blog.bitsrc.io)
Apr 22, 2019
In this post, I’ll take another step in my performance series, and we will look into an optimization trick in React using memoization to boost performance!
  • Chidume Nnamdi
How to identify and resolve wasted renders in React (medium.freecodecamp.org)
Apr 22, 2019
So, recently I was thinking about performance profiling of a react app that I was working on, and suddenly thought to set a few performance metrics. And I did come across that the first thing I need to tackle is wasted renders I’m doing in each of the webpages.
  • Nayeem Reza
Improve Performance in React Class Components using React.PureComponent (blog.bitsrc.io)
Mar 20, 2019
In this post, we will look in depth at what React.PureComponent and the goodies it brings us.
  • Chidume Nnamdi
Fixing laggy UI with React.memo (swizec.com)
Mar 18, 2019
The other day I was dealing with some laggy UI on a project and discovered React.memo as a way of fixing it. I don’t know how long React.memo has been a thing but it’s new to me and it’s amazing.
Tree-Shaking Basics for React Applications (telerik.com)
Mar 13, 2019
Tree-shaking is an important way to reduce the size of your bundle and improve performance. See how you can do it in your React apps.
  • Gift Egwuenu
Improving Performance in React Functional Components using React.memo() (blog.bitsrc.io)
Feb 25, 2019
In this post, we look at another optimization trick added in React v16.6 to help speed up our functional components: React.memo.
  • Chidume Nnamdi
React Component Performance Comparison (telerik.com)
Feb 23, 2019
Are memoized functional components in React worth migrating to today? How much of a performance gain do they bring? We test and find out.
  • Richard Reedy
Integrating React Profiler (phpied.com)
Feb 21, 2019
Say hello to the new perf hotness - a profiler built into React. This announcement blog post shows how to use it as a Chrome Extension, but you can also use it in your code, to get insight into real world interactions, even in production. Let's see how.
  • Stoyan Stefanov
Progressive React (houssein.me)
Feb 20, 2019
This article will cover how you can continue to work on the same React apps that you build, but to consider adding a number of optimizations to it. The key point here is to try and build your React site so that more people can use it.
  • Houssein Djirdeh
Yeah hooks are good, but have you tried faster React Components? (medium.freecodecamp.org)
Feb 15, 2019
5 simple tips to improve the performance of a React application
  • Seif Ghezala
Improving React Application Performance by Avoiding Unnecessary Updates (itnext.io)
Feb 05, 2019
One of the most common issues that affects performance in React is unnecessary render cycles. React Components will re-render whenever their parents update, automatically, even when their props don’t change.
  • Marcello Marques de Oliveira
Top 5 Performance Tips for React Developers (telerik.com)
Oct 19, 2018
Do your React apps need a performance boost? Check out these top five things you can do today to increase the performance of your apps.
  • Blanca Mendizábal Perelló
Profiling React Components with the User Timing API (telerik.com)
Oct 15, 2018
Profiling your React components may be the most important thing you can do to improve performance. Learn how to do this using the browser's User Timing API.
  • Blanca Mendizábal Perelló
Avoiding unnecessary renders with React context (frontarm.com)
Oct 12, 2018
Before you replace Redux's <Provider> component with React's new context API, there's a thing or two that you should know about performance.
How to prevent a rerender in React (robinwieruch.de)
Sep 11, 2018
A React performance optimization tutorial which shows you React's shouldComponentUpdate lifecycle method and React's PureComponent API to prevent the rerendering of (child) components.
How to code split Redux store to further improve your app's performance (dev.to)
Aug 14, 2018
These days, to achieve optimal app load times when users visit our website, we are questioning every byte of code that is being transferred on the network.
  • Sagi Avinash Varma
How I made my portfolio website blazing fast with Gatsby (medium.freecodecamp.org)
Aug 12, 2018
If you are thinking of building a static site with React and want it to perform as fast as a cheetah, you should consider using GatsbyJS.
  • Maribel Duran
Real world React learnings, part one (blog.usejournal.com)
Aug 02, 2018
This is the first post of a three part series explaining some lessons learned running React in production.
  • Thiago Murakami
How to work with React the right way to avoid some common pitfalls (medium.freecodecamp.org)
Jul 30, 2018
I’ll talk about subscriptions first, and then we’ll move on to handling asynchronous task cancellation to avoid memory leaks in React (the main purpose of this article).
  • Adeel Imran
Hunting JS memory leaks in React Native apps (blog.swmansion.com)
Jul 26, 2018
In this article, we gathered the typical approaches to debug and solve memory problems in a React Native app.
  • Krzysztof Magiera
Make React Fast Again [Part 1]: Performance Timeline (blog.logrocket.com)
May 25, 2018
React 15.4.0 introduced a new performance timeline feature that lets you see exactly when components get mounted, updated, and unmounted. It also lets you visualize component lifecycles in relation to each other.
  • Ben Edelstein
Optimizing React: Virtual DOM explained (evilmartians.com)
Mar 28, 2018
In this thorough beginner-friendly introduction to framework’s internals, we will demystify JSX, show you how React makes rendering decisions, explain how to find bottlenecks, and share some tips to avoid common mistakes.
  • Alexey Ivanov
  • Andy Barnov
React performance tips (medium.com)
Jan 31, 2018
Make your React app fly!
  • João Miguel Cunha
How to greatly improve your React app performance (medium.com)
Nov 21, 2017
A review of common React performance pitfalls and how to avoid them.
  • Noam Elboim
Performance-tuning a React application (codeburst.io)
Nov 10, 2017
This blog post is a case-study in the specific techniques I tried, and how well they worked.
Avoiding Unnecessary Renders in React (kirupa.com)
Oct 28, 2017
You are probably really tired of me saying this, but fast DOM performance is one of the biggest feathers in React's cap.
  • Kirupa Chinnathambi
React, Inline Functions, and Performance (cdb.reacttraining.com)
Oct 06, 2017
I’ll be getting through the first lecture of a workshop, showing off some cool new OSS, and invariably somebody says: “inline functions? I heard those are slow.”
A React And Preact Progressive Web App Performance Case Study: Treebo (medium.com)
Sep 13, 2017
Treebo recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production.
  • Addy Osmani
  • Lakshya Ranganath
React-Native: Debugging like a God (medium.com)
Sep 06, 2017
Let’s talk about debugging and performance measurement.
  • Shahen Hovhannisyan
Optimize React Performance (levelup.gitconnected.com)
Aug 12, 2017
How to improve React performance in production and avoid common mistakes.
  • Trey Huffine
High Performance React: 3 New Tools to Speed Up Your Apps (medium.freecodecamp.org)
Jul 12, 2017
React is usually pretty fast, but it’s easy to make small mistakes that lead to performance issues. Slow component mounts, deep component trees, and unnecessary render cycles can quickly add up to an app that feels slow.
  • Ben Edelstein
Make React Fast Again [Part 3]: Highlighting Component Updates (blog.logrocket.com)
Jun 01, 2017
In my last post, I discussed how unnecessary render cycles can negatively affect performance in React apps. However, in a large-scale app, it can be tricky to know which components are updating at any point in time.
  • Ben Edelstein
Make React Fast Again [Part 2]: why-did-you-update (blog.logrocket.com)
May 30, 2017
One of the most common issues that affects performance in React is unnecessary render cycles. By default, React components will re-render whenever their parent renders, even if their props didn’t change.
  • Ben Edelstein
React is Slow, React is Fast: Optimizing React Apps in Practice (medium.com)
Feb 06, 2017
The good news is: If you care about performance, it’s fairly easy to make any React application super fast.️ Here’s how.
  • François Zaninotto
How To Scale React Applications (smashingmagazine.com)
Sep 08, 2016
The team spoke with hundreds of developers about how they build and scale their web applications, and I want to share some things we learned along the way.

Video Guides & Talks

Optimising React TTI (youtube.com)
Oct 03, 2019
  • Luis Felipe Román
Profiling React rendering performance (youtube.com)
Oct 03, 2019
We are going to use Chrome Perfomance Tab and new React DevTools Profiler plugin to profile a real application. We will learn how to use these tools to identify rendering problems and make user experience really smooth.
  • Sergey Ryzhoy
High performance video editing for the mobile web (youtube.com)
Oct 03, 2019
By combining a canvas rendering strategy with invisible React UI for manipulating video overlays on the client side, and ffmpeg on the backend, we were able to build a video editing experience in a matter of weeks that supports near pixel perfect previews that can be edited in real time, and highly optimised mp4 output for the fully rendered videos.
  • Forbes Lindesay
Performance Anxiety With React (youtube.com)
Sep 13, 2019
Do not worry about the performance of your React apps anymore, Jessica will take you through a how-to of performance improvement. We will look at how to use techniques to track and increase speed.
  • Jessica Leach
Performance in React Native (youtube.com)
Jul 31, 2019
In this talk, we will look at the various tips and tricks for taking full advantage of React Native and using the performance attributes of the new architecture.
  • Ram Narasimhan
Beyond the React Native Benchmark (youtube.com)
Jul 31, 2019
In this talk, I will go through some of the best practices you should consider from setting up a project, challenges most react native app faces to scalability. At the end of this talk, you will go home with practices you can apply to your projects and feel more confident doing so.
  • Ankita Kulkarni
Practical Performance for React (Native) (youtube.com)
Jul 11, 2019
In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.
  • Anna Doubková
Reconciliation: The Root of Performant Applications (youtube.com)
Jul 04, 2019
In this talk we’ll look at an app that does everything wrong. As we fix the problems, we’ll see how React is able reuse more DOM nodes and reconcile the component tree and the DOM faster, recreating fewer nodes. By the end we’ll have a model for reconciliation that will give us a solid foundation for remembering best practices and building performant applications.
  • Jesse Kipp
Improving React Native Performance in Facebook Marketplace (youtube.com)
Jun 24, 2019
Konstantin Raev talks about reaching React Native performance goals for Facebook Marketplace--one of Facebook's biggest applications.
How to use the React Profiler to find and fix Performance Problems (youtube.com)
Jun 17, 2019
Learn how to profile your React application and fix performance problems.
Saving the Web, 16ms at a Time (youtube.com)
May 28, 2019
This talk is a deep-dive into building smooth, jank-free web experiences with React. We’ll look at how we can use Hooks and modern browser APIs to build incredible, delightful products that run great across devices.
How to use memo in React to Optimize Renders (youtube.com)
May 23, 2019
Learn how to optimize the number of times your component renders in React with the memo function.
Demystifying server-rendered React apps: Performance & Security (youtube.com)
May 03, 2019
During this lightning talk, let's walk through the pros and cons of server-rendered applications, when you want to have it and what you can expect.
  • Fernando Porazzi
Lightning fast SSR React apps with top perceived performance and no [...] (youtube.com)
May 03, 2019
Let’s have a look on how you can do the same with Next.js, and if the principles still apply today. Is the user getting a better perceived experience when we turn off the client side JavaScript?
  • Håkon Gullord Krogh
Practical Performance for React Native (youtube.com)
May 01, 2019
In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.
  • Anna Doubková
Speeding up React SSR (youtube.com)
Apr 25, 2019
This talk demonstrates a very simple solution that can be dropped into pre-existing React applications to vastly improve the throughput of an SSR Node server (around 20-40x+).
  • David Mark Clements
Practical Performance for React (Native) (youtube.com)
Apr 24, 2019
In this talk you’ll find out how some commonly used patterns have an adverse effect on the speed of your app, and how to avoid using them. We’ll mainly explore UI and state management but we’ll also dive into some native-specific issues and look at how to prevent them.
  • Anna Doubková
Rendering large lists with react-virtualized or react-window (youtube.com)
Mar 05, 2019
If you use React and need to display large lists of data efficiently, you may be familiar with react-virtualized. It's a windowing library by Brian Vaughn that renders only the items currently visible in a list (within a scrolling "viewport").
  • Addy Osmani
Moving Beyond Virtual DOM and State Management (youtube.com)
Feb 16, 2019
The virtual DOM was a fantastic innovation. It brought about a much more productive way of writing web applications by allowing us to write our views in a declarative manner. This big benefit has little to do with performance of the initial render. Instead, it is the process of updating the DOM to reflect changes in your state has become much faster. This process of bringing the DOM in sync with the state is often referred to as DOM reconciliation.
  • Sindre Osen Aarsaether
Troubleshooting a slow app, a practical guide to great React Native performance (youtube.com)
Jan 07, 2019
React Native is amazing at helping you deliver in production live apps very quickly. But to get there, you sometimes have to cut corners. Once you have a successful app loved by thousands of users, you start to wonder how to tackle performance issues. Figuring out where to start can be tricky. This will be a practical guide about tools that can help you identify bottlenecks and quickly find ways to increase your app’s performance.
  • Jean-Remi Beaudoin
Insights from Building Rich Animated Experiences in React (youtube.com)
Jan 07, 2019
Have you ever wondered why good performance is so hard to achieve in heavy animated web applications? This talk is a practical retrospective on the discoveries, the pains and the journey that led me to build reliable bulletproof animations and transitions in real life production projects.
  • Jeremias Menichelli
Optimizing the Critical Rendering Path in React (youtube.com)
Jan 07, 2019
One of the crucial elements of performance is to ship relevant content to your users as soon as possible. But in modern web applications, figuring out what to ship and what to prioritize can be hard. Framework driven applications have the big disadvantage of being pretty heavy for the initial load. We will start from understanding how the browser works, then we will explain what the critical rendering path is and how we can optimize it.
  • Alex Moldovan
High-Performance Images Using Gatsby with Emma Wedekind (youtube.com)
Jan 04, 2019
Emma Wedekind and Jason Lengstorf work on converting Emma’s portfolio page to use `gatsby-image` for better performance and user experience. Along the way they talk about StaticQuery, GraphQL, and how Emma designs websites.
  • Jason Lengstorf
  • Emma Wedekind
Building a High Performance, Dynamic CDN with Next.js (youtube.com)
May 28, 2018
In this talk, we will delve into tuning an out-of-the-box Next.js application to serve thousands of requests on a single instance. Then how we achieved CDN-like performance while supporting dynamic content for Help Users Vote.
  • Fouad Matin
Advanced Web Performance Optimizations (youtube.com)
Mar 31, 2018
As web developCome join Kyle Mathews, founder of Gatsby, as he talks about modern web performance. You'll learn the tools & techniques you can start using today to make your React sites super fast. We’ll discuss code splitting, "link preload", greedy prefetching, header optimizations, service workers, and more using Gatsby as a case study for these techniques.

Books & Guides

web.dev React guide (web.dev)
May 08, 2019
Build performant and progressive React applications.
  • Houssein Djirdeh

Courses & Video Series

React: Testing and Debugging (lynda.com)
Jul 05, 2017
Learn how to test, debug, and optimize your React code with tools like Jest, Chrome, ESLint, and flow.

Podcast Episodes

Permformance that Matters with Ram N (devchat.tv)
Aug 13, 2019
Ram N, a member of the React Native core team, joins the panel to discuss performance. After a small sidetrack discussion about AR and VR, the panel jumps into the discussion about performance and how to measure performance that matters. Ram defines performance and what qualifies as a performance scenario.
  • Josh Justice
  • Charles Max Wood
  • Ram N
Performance with Anna Doubkova (devchat.tv)
Jul 09, 2019
Anna Doubkova, a developer at Hive, shares her experience switching to React Native from React. Anna and Charles Max Wood discuss the reusability when moving from React to React Native.
  • Charles Max Wood
  • Anna Doubkova
Optimizing for Performance in React with Aggelos Arvanitakis (devchat.tv)
Jun 04, 2019
Aggelos Arvanitakis shares things he has learned from his mistakes in his blog posts. The panel discusses the most common problems in react that causes poor performance.
Decide with Your Human Brain, with Brian Vaughn (reactpodcast.com)
Feb 28, 2019
Brian Vaughn is a member of the React Core team and creator of libraries like react-virtualized and react-window. He's a wealth of knowledge in React performance and application profiling. Chantastic asks Brian about the new profiler tools he's been working on (available to React v16.5 apps), React Core team dynamics, and the future of windowing in React and browsers.
React Perf Devtool with Nitin Tulswani (reactpodcast.com)
May 08, 2018
Nitin Tulswani is a prolific developer and the creator of react-perf-devtool, a library that helps with profiling the performance of your React components since react-addons-perf was deprecated in React 16. In this episode we discuss Nitin's approach to writing code and the motivation behind several of his open source projects.