Overview

Memoisation is the process of memoising, or caching, the output of some logic based on the input. We work mostly with functions, and to memoise a function is to cache its return value based on the arguments. This applies to function components too, memoising a component is to cache its output if it receives the same props. Components are just functions like any other after all, and it is possible to cache the output (React elements) if its input (props) is the same each time it is called.

Memoisation is an optimisation we can make to our code to improve performance by reducing the amount of unnecessary calculations we're performing when a function receives the same inputs. There is a few gotchas though, and it's easy to over-reach for memoisation which can, in some cases, cause more harm than good to an app's performance.

In this section we'll go over memoisation as it applies to our React code, how to utilise it, and some common places people trip up.