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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.