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:

Memoizing utilises a system’s memory to store results of expensive operations for subsequent usage.

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.