React Performance

Articles & Tutorials

Why you've been bad about Profiling React Apps (epicreact.dev)
Sep 14, 2020
When was the last time you tried your app out on the kinds of devices your end users are using? If you haven't, have you at least tried to simulate the kind of performance characteristics of your users on low-end devices?
Fix useEffect re-running on every render (daveceddia.com)
Aug 04, 2020
If your useEffect function is running too often, triggering on every change, look at its dependencies. Here we use the functional form of setState to reduce how often the effect runs.
Methods Of Improving And Optimizing Performance In React Apps (smashingmagazine.com)
Jul 16, 2020
In this tutorial, we will discuss various methods of optimizing performance in React applications, and also the features of React that we can use to improve performance.
  • Shedrack Akintayo
How to useMemo in React (robinwieruch.de)
Jul 13, 2020
React's useMemo Hook can be used to optimize the computation costs of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's useMemo Hook.
4 ways to render large lists in React (blog.logrocket.com)
Jul 10, 2020
In this guide, we’ll outline some problems associated with bloated lists and walk through steps to overcome these performance challenges in React applications.
  • Samaila Bala
Exploring React Renders: Different Ways a Component Gets Re-Rendered (blog.bitsrc.io)
Jun 22, 2020
In this blog post, we would be looking at different scenarios/cases on how React components render and re-renders. This is not to be an introductory post so, some prior knowledge of React would be a prerequisite.
  • Jasbindar Singh
Using `React.memo` to Avoid Unnecessary Rerenders (kyleshevlin.com)
Jun 16, 2020
This post is going to focus on React.memo and how to use it to avoid unnecessary rerenders of React components.
  • Kyle Shevlin
How to use React memo (robinwieruch.de)
Jun 09, 2020
React's memo API can be used to optimize the rendering behavior of your React function components. We will got through an example component to illustrate the problem first, and then solve it with React's memo API.
How GraphQL boosts performance in Gatsby (blog.logrocket.com)
Jun 04, 2020
We'll take a look at how Gatsby, which is a PWA generator, uses GraphQL to pull in data at build time and also its implications on performance.
  • Obinna Ekwuno
React Performance Optimization with React.memo() (felixgerschau.com)
May 12, 2020
In this article I will explain to you how you can optimize React performance by using React.memo, some common pitfalls you could encounter and why you shouldn't always use React.memo.
  • Felix Gerschau
Report Web Vitals in Next.js (sergiodxa.com)
May 11, 2020
Measure the performance of our Next.js application with Web Vitals.
  • Sergio Xalambrí
The Ultimate Guide to React Native Optimization (callstack.com)
May 10, 2020
In this and the following articles, we will show you how to optimize the performance and stability of your apps. Thanks to the practices described in the guide, you will improve the user experience and speed up the time-to-market of your apps.
  • Mike Grabovski
An in-depth guide to performance optimization with webpack (blog.logrocket.com)
May 07, 2020
These days, you have to use a module bundler like webpack to benefit from a development workflow that utilizes state-of-the-art performance optimization concepts. Module bundlers are built by brilliant people just to help you with these difficult tasks.
  • Sebastian Weber
Tracing user interactions with React (kentcdodds.com)
May 07, 2020
How to use the (EXPERIMENTAL) interactions tracing API in React.
Should I use event delegation in React? (dev.to)
May 02, 2020
The short answer is "No". It does not give you any noticeable performance benefit.
  • Thawsitt Naing
How to Achieve 60FPS Animations in React Native (callstack.com)
May 01, 2020
Use native solutions to achieve smooth animations and gesture-driven interface at 60FPS.
  • Mike Grabowski
When does React re-render components? (felixgerschau.com)
Apr 29, 2020
In the first part of this article, I'll explain to you the most important concepts about rendering in React and how React decides to re-render a given component. In the second part, I'll show you what you can do to optimize the render performance of your React application.
  • Felix Gerschau
How to Choose Tools Wisely and Build Fast-Working React Native Apps (callstack.com)
Apr 24, 2020
Find the harmony between native and JavaScript to build fast-working and easy-to-maintain apps.
  • Mike Grabowski
Optimize React Native Apps’ Battery Drain with Mobile-Dedicated Libraries (callstack.com)
Apr 22, 2020
Use libraries dedicated to mobile and build features faster on many platforms at once, without compromising on the performance and user experience.
  • Mike Grabowski
How Higher-Order Components Can Improve Performance of React Native Apps? (callstack.com)
Apr 14, 2020
Find out how to use dedicated higher-ordered React Native components to improve user experience and performance of your apps.
  • Mike Grabovski
Profiling React.js Performance (addyosmani.com)
Apr 08, 2020
Today, we'll look at measuring React component render performance with the React Profiler API, measuring interactions with React's new experimental Interaction Tracing API and measuring custom metrics using the User Timing API.
  • Addy Osmani
Measure Performance with the New React Profiler Component (blog.bitsrc.io)
Mar 25, 2020
Learn how to monitor your components’ performance with the new ReactJS Profiler component.
  • Chidume Nnamdi
React Production Performance Monitoring (kentcdodds.com)
Mar 17, 2020
How to set up performance monitoring for production React applications.
5 Recommended Tools for Optimizing Performance in ReactJS (blog.bitsrc.io)
Mar 16, 2020
My top favorite tools for monitoring and optimizing my React components.
  • Chidume Nnamdi
5 Tips to Improve the Performance of Your React Apps (alligator.io)
Mar 08, 2020
Has your React app been feeling kinda sluggish? Are you afraid of turning on the “paint flash” in Chrome DevTools because of what you might see? Try out these 5 performance tips!
  • William Le
Handling Images in Gatsby with High Performance (scotch.io)
Feb 19, 2020
Gatsby, an open-source tool for building high-performance JAMstack apps, boasts numerous plugins that extend its capabilities. For example, by leveraging source plugins in Gatsby, you can source data from multiple services, APIs, and even Excel spreadsheets.
  • William Imoh
Debugging performance problems in React (blog.logrocket.com)
Feb 18, 2020
Ensuring a high level of performance is key when developing any application, whether it be an API, a frontend app, or a backend app.
  • Diogo Souza
Overcoming single-threaded limitations in React Native (blog.logrocket.com)
Feb 13, 2020
React Native was designed to bridge gaps between web and mobile frameworks in software development. Unfortunately, developers face certain hurdles related to performance when working with React Native.
  • Raphael Ugwu
Stale-while-revalidate Data Fetching with React Hooks: A Guide (toptal.com)
Jan 22, 2020
Leveraging the stale-while-revalidate HTTP Cache-Control extension is a popular technique. It involves using cached (stale) assets if they are found in the cache, and then revalidating the cache and updating it with a newer version of the asset if needed. Hence the name stale-while-revalidate.
  • Avi Aryan
10 Ways to Optimize Your React App’s Performance (blog.bitsrc.io)
Jan 15, 2020
How to optimize performance to deliver an awesome user experience.
  • Chidume Nnamdi
Trim the Fat From Your Bundles Using Webpack Analyzer & React Lazy/Suspense (itnext.io)
Dec 26, 2019
In this post I will go over a real world example from my work at Wix where I was able to trim my bundle size by about 80% using Webpack Analyzer and React Lazy/Suspense.
Case Study: React partial SSR with SFCC (calendar.perfplanet.com)
Dec 23, 2019
This case study shows one way to implement partial Server-Side Rendering (SSR) and achieve performance gains without big investments in middleware for cloud-based platforms.
  • Lyubomir Angelov
The unseen performance costs of modern CSS-in-JS libraries in React apps (calendar.perfplanet.com)
Dec 09, 2019
In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on occasion and finally consider techniques that we can employ to mitigate them. So, without further ado, let’s jump straight in.
  • Aggelos Arvanitakis
Nginx + Create-React-App + gzip: Tripple Your Lighthouse Performance Score in 5 Minutes (itnext.io)
Nov 29, 2019
Many react developers use a boilerplate to get their projects started. For me this boilerplate is create-react-app. While being great for reducing pain during development, not having to deal with Webpack and its perks and caveats has its pitfalls. One of these pitfalls hit me when deploying my app to a real server and running the Lighthouse audit with Chrome.
  • Florian Martens
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

Tracking Errors & Performance in Next.js with AppSignal (youtube.com)
Aug 26, 2020
In this video we cover how to add error and performance tracking to Next.js with AppSignal. We'll do this by adding a custom server to support server-side performance tracking.
Diagnose and fix React performance issues (youtube.com)
Jun 24, 2020
Performance issues like this can be a huge pain to diagnose and fix,” they admitted. Yet they were ultimately able to solve it — how did they know where to start?
  • Emmi Russo
  • Anders Wood
That React Component Right Under Your Context Provider Should Probably Use React.memo (youtube.com)
Feb 18, 2020
Sophie Alpert - former manager of the React team at Facebook - mentioned in a tweet "That React Component Right Under Your Context Provider Should Probably Use `React.memo`"... in this video we're going to explore what she meant, what the issue is, and how to solve it.
Parallel computing in React (youtube.com)
Dec 29, 2019
In this session, I am going to show my experience running jobs in parallel on a React application that will provide a pleasant user experience and exciting development.
  • Majid Hajian
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

The Ultimate Guide to React Native Optimization (callstack.com)
May 14, 2020
This guide is a collection of the most relevant and effective tips, tricks, tactics, and solutions for optimizing React Native apps. They are based on our experience as senior developers and Core Contributors to React Native.
  • Mike Grabowski
  • Jakub Mazurek
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

Matt Perry on Magic Motion and React Performance Anxiety (reactpodcast.com)
May 14, 2020
This week Matt Perry tells about Magic Motion — the killer new feature for Framer Motion that makes shared element transitions easy for React developers.
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.