Optimizing Performance for React

The DOM

Web pages are not just the HTML we see in the source code. When we write HTML, it is parsed by the browser to create a collection of nodes with mutable properties to be programatically interacted with called the Document Object Model or DOM.

When we load a web page, the following happens:

The browser transforms HTML into the DOM
CSS is interpreted and DOM node properties are updated
JavaScript is loaded and changes that take effect onLoad or when the DOM is finished loading take effect.

The Virtual DOM

Manipulating the DOM is an expensive operation meaning it costs lots of processing power and/or time. To avoid manipulating the DOM, React maintains a separate, in-memory repreentation of the DOM called the Virtual DOM. With the Virtual DOM, changes to the DOM can be efficiently staged and compared with the existing DOM so that only necessary changes to the actual DOM are made keeping things fast.

Wasted Renders and Expensive Operations

React components are just JavaScript functions that render HTML which in turn is transformed into nodes within the DOM. This process is referred to as rendering.

By default, React will re-render every component every time anything changes. This is appropriate when the value of props change but undesirable when the value of props stays the same. When a component is re-rendered but the value of its props stays the same its called a wasted render. Wasted renders are to be avoided in most cases because a wasted render results in unneccesary work to modify the DOM.

Regular functions can also be expensive. We equally want to avoid re-running expensive functions if the inputs don't change.

In general, its a bad idea to re-run a function with the same inputs to produce an output we already have. It would be faster just to use the output we already have.

Memoization

Memoization is an optimization technique for improving performance with expensive functions. If the inputs to a function are the same as the last time the function was run, then the last result is returned instead of re-running the function. In React, there are three different typoes of memoization:

React.PureComponent (for class components) and React.memo (for function components)
React.useMemo for non-primitive values.
React.useCallback for functions.

Memoizing a Component

Both React.PureComponent and React.memo can be used to memoize a component and help with preventing wasted renders. Because our project primarily uses function components, I will focus on React.memo.

React.memo is a high order component meaning it takes a compenent as one of its arugments and returns a component. To use React.memo we simply wrap our function components in React.memo:

// Declare Component to be Memoize
const PrintArrayComp = ({ array }) => array.map( 
    (item, index) => <p>{`[${index}] ${item}`}</p>
);

// Memoize Component
const PrintArray = React.memo(PrintArrayComp);

// Use Component
<PrintArray array={["apple", "orange", "banana"]} />

By default, React.memo will compare the old props to the new props using referential equality as opposed to value equality. We can override this behavior if we'd like by passing a second argument to React.memo containing a function that accepts the old and new props and returns a boolean value to say whether or not the props should be considered equal. Using our PrintArray component above, we can override the default behavior to consider props equal if the array is the same length:

// Declare Component to be Memoize
const PrintArrayComp = ({ array }) => array.map( 
    (item, index) => <p>{`[${index}] ${item}`}</p>
);

// Declare Prop Comparison Override Function
const propsAreEqual = (prevProps, nextProps) => prevProps.length === nextProps.length

// Memoize Component
const PrintArray = React.memo(PrintArrayComp, propsAreEqual);

// Use Component
<PrintArray array={["apple", "orange", "banana"]} />

Read Pure Functional Components in React for more details.

Memoizing Props

In most cases, the default referential equality comparsion of React.memo is what we want but we need to ensure referential equality for this to work. To do so we have to separate our props into two groups:

Primitive Data: Boolean. null, undefined, String and Number.
Non-primitive Data: Arrays and Objects
Functions Any function

Primitive data does not need to be memoized.

Memoizing Non-Primitive Data

We can use React.useMemo to memoize non-primitive data bypassing a function that generates the data (a factory function) as the first argument and an array of values that should be watched for change before re-running our factory function (a dependency list) as the second argument:

// Declare memoized component to print an object as a table
const ObjectToTable = React.memo(({object}) => (
    object.keys.map( (key) => {
        let value = object.key;
        return <b>{key}</b>: {value};
    })
));

// Memoize data to pass to component
const objectFromAPI = React.useMemo(
    (apiParams) => getObject(apiParams),
    [apiParams]
);

// Use memoized data with component
<ObjectToTable object={objectFromAPI} />

Memoizing Functions

We can use React.useCallback to memoize a function. The syntax is imilar to React.useMemo where we pass an argument as the first argument and a dependency list as the second argument but it differs in that React.useMemo returns the result of a function and React.useCallback returns the function itself to be run later.

// Declare component that accepts an onClick event handler
const AlertOnClick = React.memo( ({clickHandler}) => (
    <p onClick={clickHandler}>Click me!</p>
));

// Declare alert message
// This does not need memoized because it is primitive data
const alertMessage = "I've been clicked!";

// Memoize the callback
const clickHandler = React.useCallback( _ => alert(alertMessage), [alertMessage]);

// Use memoized callback with component
<AlertOnClick clickHandler={clickHandler}>

For a more in depth look at React.memo, React.useMemo and React.useEffect see Introduction to React.memo, useMemo and useCallback.

Optimization Always Comes At A Cost

Optimization is not magic, it is a tradeoff and should be used only when appropriate. For a detailed look at when and when not to use React.useMemo and React.useCallback, read When to useMemo and useCallback.