Member-only story
How to Memoize Components in React
Using React.memo, useMemo other APIs to limit re-rendering of components
Memoizing: Your first port of call for performance optimisation
Memoizing in React is a performance feature of the framework that aims to speed up the render process of components. The technique is used in a wide spectrum of disciplines, from game engines to web applications. This article explores memoization techniques within React specifically, covering the APIs and example use cases along the way.
Memoizing is a well known concept in computer programming, aiming to speed up programs by caching results of expensive function calls and re-using those cached results as to avoid repeating those expensive operations:
While Memoizing often-times saves processing cycles, there is a limit to how much it can be used — this is of course dictated by a system’s memory limits. When it comes to React, we are caching the result of a component’s render() method — or simply the returned JSX of a functional component.
Memoizing can be applied to both class components and functional components; the feature is implemented has HOCs and React Hooks — both of which we’ll explore further down.
It is wise to consider how much of your application will be cached via memoizing. Even though I personally have not ran into memory limitations, mobile devices will inevitably have less memory to utilise than laptop or desktop counterparts.
Memoizing in React is not a guarantee that your components will be cached, but rather a best-effort attempt based on factors such as available resources.
Memoizing can help keep UI responsive
There is no denying that fast and responsive UIs are great for the end user, and great for brand recognition with the experience delivered. A UI response delayed by over 100 milliseconds will already become perceptible to the end user. Aiming for 100 milliseconds or less for component re-renders, and UI feedback in…
