Switch to 🌑 mode

< All Articles

React Memoization

June 19, 2023

Table of Contents

What is Memoization

Memoization is a technique used in computer programming to optimize the execution time of a function by caching its results for a given set of input parameters. It involves storing and reusing computed results, thereby avoiding redundant calculations.

Understanding Memoization from a Cache Perspective

From a cache perspective, memoization is a technique that involves caching the results of expensive computations or function calls to avoid redundant calculations in the future. It leverages the concept of a cache, which is a temporary storage mechanism that stores previously computed values or function outputs.

When a computation or function is memoized, its input parameters are used as keys to access the cache. Before performing the computation or function call, the memoization mechanism checks if the cache already contains a stored result associated with the provided input parameters.

If a matching result is found in the cache, it is retrieved and returned instead of recomputing the result. This avoids unnecessary calculations and improves performance by reducing processing time.

If a matching result is not found in the cache, the computation or function call is executed as usual. The result is then stored in the cache, associated with the provided input parameters, for future reference.

The cache can be implemented using various data structures, such as objects, arrays, or specialized caching libraries. The choice of data structure depends on factors like the complexity of the input parameters and the desired cache lookup and storage efficiency.

It's important to note that the cache should be managed carefully to ensure that it stays up to date and doesn't consume excessive memory. Cache eviction strategies, such as removing least recently used entries or setting an expiration time, can be implemented to control the cache's size and prevent memory-related issues.

In summary, memoization from a cache perspective involves caching the results of computations or function calls based on their input parameters. By storing and reusing these results, redundant calculations can be avoided, leading to improved performance and efficiency.

Javascript Memoization

In JavaScript, memoization can be implemented using various techniques and data structures.

One important consideration when implementing memoization in JavaScript is understanding the concept of referential equality. In JavaScript, objects and arrays are reference types, which means that variables storing objects or arrays actually hold references to their memory locations, rather than the values themselves.

When performing memoization with objects or arrays, it's crucial to be aware of how referential equality affects the caching mechanism. Since strict equal checks (===), used for referential equality checks, compare the memory addresses of the objects or arrays, it is necessary to ensure that the same reference is used when accessing cached results.

For example, if a memoized function is called with an object or an array as an argument, subsequent calls with different objects or arrays that have the same content will not benefit from memoization. This is because the new objects or arrays will have different memory addresses, and referential equality checks will fail.

To overcome this limitation, you can consider using techniques like serializing objects or arrays into a unique string representation as keys for the cache. This way, you can achieve memoization based on the values of the objects or arrays rather than their memory addresses, but this often comes at a high performance penalty that might outweigh the memoization benefits.

It's important to note that when using reference types for memoization, changes made to the cached object or array will be reflected across all references, as they all point to the same memory location. Therefore, if you modify a memoized object or array, ensure that the modification does not interfere with the correctness of subsequent function invocations that rely on the cached results.

By understanding referential equality and considering its implications when implementing memoization in JavaScript, you can effectively optimize the performance of your memoized functions while avoiding potential pitfalls related to object and array references.

// without memoization
function fibonacci(n) {
  if (n <= 1) {
    return n
  }

  return fibonacci(n - 1) + fibonacci(n - 2)
}

fibonacci(10)

// with memoization
function fibonacci(n) {
  if (n <= 1) return n

  // Check if the result is already cached
  if (fibonacci.cache[n]) {
    return fibonacci.cache[n]
  }

  // Compute and cache the result
  fibonacci.cache[n] = fibonacci(n - 1) + fibonacci(n - 2)

  return fibonacci.cache[n]
}

// Initialize the cache
fibonacci.cache = {}

fibonacci(10)

The code includes two implementations of the fibonacci function: one without memoization and one with memoization. The implementation without memoization uses a recursive approach. It checks for the base cases where n is either 0 or 1 and returns the respective Fibonacci number. For n greater than 1, it recursively calls itself with n - 1 and n - 2 as arguments and returns the sum of the results of these recursive calls. However, this implementation can be inefficient for larger values of n due to redundant calculations. The implementation with memoization improves performance by caching previously computed Fibonacci numbers, the fibonacci function utilizes memoization to avoid redundant computations for the same n value. By storing the results in the fibonacci.cache object, subsequent calls with the same n retrieve the cached value instead of recalculating it. In this case, the fibonacci function will be called 9 times. However, if we didn't implement caching, it would have to run 177 times. This number grows exponentially as n increases due to the recursive nature of the algorithm.

React Memoization

React is a popular JavaScript library for building user interfaces. It utilizes a virtual DOM (Document Object Model) to efficiently update and render components based on changes in application state. Memoization is a technique that can enhance React's performance by optimizing the rendering process.

React provides several built-in mechanisms for memoization, which can enhance performance by optimizing component rendering. When used correctly, these techniques allow you to selectively memoize components or their parts to prevent unnecessary re-renders.

Higher-Order Components (HOC)

Higher-Order Components (HOCs) allow you to wrap a component and provide memoization capabilities. By wrapping a component with an HOC, you can control when the component should be re-rendered based on its props.

import React, { useState } from "react"

const withMemoization = WrappedComponent => props => {
  const [cache, setCache] = useState({})

  const generateCacheKey = props => {
    return JSON.stringify(props)
  }

  const memoizedComponent = props => {
    const cacheKey = generateCacheKey(props)

    if (cache.hasOwnProperty(cacheKey)) {
      return cache[cacheKey]
    }

    const result = <WrappedComponent {...props} />
    setCache(prevCache => ({ ...prevCache, [cacheKey]: result }))

    return result
  }

  return memoizedComponent(props)
}

// Usage example
const MyComponent = ({ name }) => {
  console.log("Rendering MyComponent")
  return <div>Hello, {name}!</div>
}

const MemoizedComponent = withMemoization(MyComponent)

// In another component's render method
const ExampleComponent = () => {
  return (
    <div>
      <MemoizedComponent name="John" />
      <MemoizedComponent name="John" /> {/* Reusing the same props */}
      <MemoizedComponent name="Alice" /> {/* Different props */}
    </div>
  )
}

In the example above, we define a withMemoization HOC that memoizes the rendering of the wrapped MyComponent based on its props. The HOC creates a cache object to store computed results and generates a unique cache key by serializing the props.

The memoizedComponent function inside the HOC checks if the result is already cached using the generated cache key. If it is, the cached result is returned. If not, the result is computed, cached, and returned.

When using the MemoizedComponent in the render method of another component, you'll notice that the MyComponent is only rendered once for the same set of props ('John'). Subsequent renderings with the same props reuse the cached result, preventing unnecessary re-rendering.

Note that this is a simplified implementation for demonstration purposes. In a real-world scenario, you may need to consider cache eviction strategies, handling complex props, and optimizing the cache size to avoid memory issues..

PureComponent

PureComponent is a base class in React that implements shallow prop and state comparison to determine if a component should re-render. It automatically performs memoization by shallowly comparing the new and previous props and state. Extending PureComponent is equivalent to defining a custom shouldComponentUpdate method that shallowly compares props and state.

Shallow comparison, also known as referential equality, in React is a mechanism that compares the references of props to determine if a component should be re-rendered. It checks for changes in top-level props' references, skipping deep comparisons of nested objects or arrays. By using referential equality, React optimizes rendering by avoiding unnecessary updates. However, it's important to consider the limitations of shallow comparison and ensure immutability when dealing with objects or arrays as props. Custom comparison logic can be implemented to handle deep changes if needed.

import { PureComponent } from "react"

export class CalculatorPureComponent extends PureComponent {
  render() {
    return (
      <div>
        <h1>{this.props.total}</h1>
      </div>
    )
  }
}

By extending PureComponent, the component will re-render only if there are changes to the props or state that are detected by the shallow comparison.

React.memo

React.memo is a higher-order component that can be used to wrap a functional component. It memoizes the component based on its props, preventing re-rendering if the props haven't changed.

import { memo } from "react"

export const CalculatorPureComponent = memo(({ total }) => {
  return (
    <div>
      <h1>{total}</h1>
    </div>
  )
})

In the example above, CalculatorPureComponent is wrapped with React.memo, which memoizes the component based on its props. It will only re-render if the props have changed.

You should only rely on memo as a performance optimization. If your code doesn’t work without it, find the underlying problem and fix it first. Then you may add memo to improve performance.

While both PureComponent and React.memo optimize component rendering, PureComponent is used for class components and implements shallow comparison in shouldComponentUpdate, while React.memo is used for functional components and performs a shallow equality check on props to decide whether to re-render.

Specifying a custom comparison function

In rare cases it may not be feasible to minimize the props changes of a memoized component. In that case, you can provide a custom comparison function, which React will use to compare the old and new props instead of using shallow equality. This function is passed as a second argument to memo. It should return true only if the new props would result in the same output as the old props; otherwise it should return false.

const Chart = memo(({ dataPoints }) => {
  // ...
}, arePropsEqual)

const arePropsEqual = (oldProps, newProps) =>
  oldProps.dataPoints.length === newProps.dataPoints.length &&
  oldProps.dataPoints.every((oldPoint, index) => {
    const newPoint = newProps.dataPoints[index]
    return oldPoint.x === newPoint.x && oldPoint.y === newPoint.y
  })

If you do this, use the Performance panel in your browser developer tools to make sure that your comparison function is actually faster than re-rendering the component. You might be surprised.

When you do performance measurements, make sure that React is running in the production mode.

If you provide a custom arePropsEqual implementation, you must compare every prop, including functions. Functions often close over the props and state of parent components. If you return true when oldProps.onClick !== newProps.onClick, your component will keep “seeing” the props and state from a previous render inside its onClick handler, leading to very confusing bugs. Avoid doing deep equality checks inside arePropsEqual unless you are 100% sure that the data structure you’re working with has a known limited depth. Deep equality checks can become incredibly slow and can freeze your app for many seconds if someone changes the data structure later.

useCallback

useCallback is a React hook that memoizes a provided callback function. It is useful when passing callbacks to child components, ensuring that the callback reference remains stable unless its dependencies change.

// App.js
import { CalculatorPureComponent } from "./CalculatorPureComponent"
import { useState, useCallback } from "react"

const App = () => {
  const [total, setTotal] = useState(0)

  const clickHandler = useCallback(ttl => {
    setTotal(ttl)
  }, [])
  return <CalculatorPureComponent total={total} clickHandler={clickHandler} />
}
export default App

// CalculatorPureComponent.js
import { memo } from "react"

export const CalculatorPureComponent = memo(({ clickHandler, total }) => (
  <a>
    <button onClick={() => clickHandler(total + 1)}>✚</button>
    <button onClick={() => clickHandler(total - 1)}>−</button>
    <h1>{total}</h1>
  </a>
))

_In the example above, the clickHandler callback is memoized using useCallback. It guarantees that the callback reference remains the same. It is safe in this case to omit setTotal in the array of dependencies, because React guarantees that this function identity is stable and won’t change on re-renders. _

By memoizing the callback, you can prevent unnecessary re-rendering of child components that rely on the callback. This is particularly useful when passing callbacks as props to child components that use referential equality checks to optimize rendering.

More information about how to use useCallback you can find here

useMemo

useMemo is a React hook that allows you to memoize the result of a computation within a functional component. It takes a dependency list and only recomputes the result when the dependencies change.

// App.js
import { CalculatorPureComponent } from "./CalculatorPureComponent"
import { useState, useCallback, useMemo } from "react"

const App = () => {
  const [total, setTotal] = useState(0)

  const clickHandler = useCallback(ttl => {
    setTotal(ttl)
  }, [])

  const memoizedObject = useMemo(
    () => ({
      amount: total,
    }),
    [total]
  )

  return (
    <CalculatorPureComponent
      total={memoizedObject}
      clickHandler={clickHandler}
    />
  )
}
export default App

// CalculatorPureComponent.js
import { memo } from "react"

export const CalculatorPureComponent = memo(({ clickHandler, total }) => (
  <a>
    <button onClick={() => clickHandler(total.amount + 1)}>✚</button>
    <button onClick={() => clickHandler(total.amount - 1)}>−</button>

    <h1>{total.amount}</h1>
  </a>
))

In the example above, the object we pass to CalculatorPureComponent will be different on each render (it will refer to a different point in memory even though the value stored inside object are identical). So, we pass memoizedObject which is memoized using useMemo. The computation is only re-executed when the total prop changes.

More information about how to use useMemo you can find here

When to Memoize

Memoization is most effective when used for computationally expensive functions, functions with repetitive calculations, or functions that are called frequently with the same input parameters. It is important to consider the trade-off between memory usage and computational savings when deciding when to apply memoization.

By selectively memoizing functions, you can optimize the performance of your code and reduce unnecessary computations.

Note: Memoization should be applied to functions that are referentially transparent, meaning their output depends solely on their input parameters and has no side effects. Functions with side effects may produce incorrect results when memoized.

Identifying Memoization Opportunities

You can consider using memoization in the following scenarios:

  • Computations: When you have complex calculations or operations that are repeated frequently but produce the same results for the same input. Memoizing these computations can save processing time.
  • Props: When a component receives props that do not change frequently, and you want to prevent unnecessary re-rendering. Memoization can help avoid re-calculating the component's output if the props remain the same.
  • Callbacks: When passing callbacks to child components, especially in cases where the child components use referential equality to optimize rendering. Memoizing callbacks ensures that child components do not re-render unnecessarily.

Limitations and Trade-offs

While memoization can provide performance benefits, it's important to be aware of its limitations and potential trade-offs. Here are a few considerations:

  • Increased Memory Usage: Memoization involves caching function results, which can consume additional memory. Caching large data sets or functions with many possible inputs may increase memory usage significantly. It's important to evaluate the memory impact when applying memoization.
  • Side Effects: Memoization assumes that a function's output solely depends on its input parameters. If a function has side effects, such as modifying external state or making network requests, memoization might lead to incorrect behavior or stale data. Memoization is best suited for pure functions that have no side effects.
  • Non-deterministic Functions: Memoization relies on the assumption that the same inputs will always produce the same outputs. If a function has non-deterministic behavior, such as generating random numbers or relying on external state, memoization may not be suitable.

Understanding these limitations will help you make informed decisions when applying memoization in your React components.

Guidelines for Memoization

Consider the following guidelines when applying memoization in React:

  • Performance Profiling: Before applying memoization, profile and measure your application's performance to identify the areas that would benefit the most from optimization.
  • Avoid Over-Memoization: Be cautious not to overuse memoization, as it may introduce unnecessary complexity and memory overhead. Only apply memoization in situations where it provides a noticeable performance improvement.
  • Immutable Dependencies: When using useMemo and useCallback, ensure that the dependencies you specify are immutable or stable. Using mutable objects or functions as dependencies may lead to unexpected behavior.
  • Memoization Granularity: Fine-tune the granularity of memoization. Memoize at a higher level if multiple components or subcomponents share the same expensive computation or callback.
  • Benchmarking: Benchmark and compare the performance impact of memoization in different scenarios to ensure that it provides the expected benefits.

By following these guidelines and understanding the scenarios where memoization can be beneficial, you can optimize the performance of your React components and enhance the overall responsiveness of your application.

Profile picture

Written by Pavel Ivanov in sunny Spain. Reach me on LinkedIn. Or just take a look at my CV.

* use of site content is strictly prohibited without prior written approval