How to Memoize Components in React
Using React.memo, and useMemo other APIs to limit re-rendering of react components
Memoizing: First port of call for performance optimisation.
The Memoizing in React is a performance feature of the framework and that point to speed up the render process of react components. The technique is used in a wide spectrum of disciplines, from game engines to web apps. This article explores memoization techniques within React specifically, and covering the APIs and example use cases along the way.
Memoizing is a well known concept in computer programming, pointing 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 the Memoizing often-times saves processing cycles, there is a limit to how much it can be used — and this is of course dictated by a system’s memory limits. When it comes to React, we are caching the result of a react component’s render() method — or simply the returned JSX of a functional component.
The Memoizing can be applied to both class and functional components. The feature is implemented has HOCs(higher-order component) and React Hooks — both of which we’ll explore further down.
It is wise to consider how much of your applications will be cached via memoizing. Even though I personally have not ran into memory limitations, and mobile devices will inevitably have less memory to utilise than laptop and / or desktop counterparts.
Memoizing in React is not a guarantee that your react components will be cached, but rather a best-effort attempt based on factors such as available resources.
Memoizing withReact.memo:
Memoizing in React is first used for increasing rendering speed while decreasing rendering operations, caching a component’s render() result upon an initial render cycle, and re-using it given the same inputs (props, state, class properties, and function variables).
To save these render() operations from repeating and generating an identical result, and we can instead cache the result of the initial render() and refer to that result in memory the next time a creact omponent renders.
You may be thinking, React.PureComponent does this! React.PureComponent is indeed a performance optimisation, and that implements the componentShouldUdpdate() lifecycle method to compare shallow props and state comparison from the previous render. If these match, the react component will not re-render.
export class MyComponent extends React.PureComponent { ... }
The term “shallow” is used to denote the props and state of the React components being tested only. The props and state of React child components are not tested with React.PureComponent.
The React.PureComponent is limited to class components only, and with its reliance on lifecycle methods and state. To remedy this, React introduced the React.memo API — a higher order component(HOC) that implements the same shallow comparison on the component’s props to determine if a re-render will be processed. This HOC (higher order component )can then wrap functional components, too.
We can either wrap the API directly around the React component:
const MyComponent = React.memo(function WrappedComponent(props) { ... });
Or declare the component and the React.memo separately:
function WrappedComponent(props) { ... } const MyComponent = React.memo(WrappedComponent);
The React.memo also gives us the option to provide your own comparison function as a second argument to the API, and giving us more granularity on determining whether a refresh is needed:
function myComparison(prevProps, nextProps) { ... } export default React.memo(WrappedComponent, myComparison);
It is common practice to refer to a React component wrapped in a HOC as WrappedComponent. The memoized component is rprovides separately and exported as the default export.
