The Power of Memoization
Tags: React, Typescript, Memoization

For some, the concept of memoization may be new. For others, this may be a long-time familiar tool used to craft efficient components when building a web application. In my experience, I have learned there are certain situations when it is appropriate to memoize as well as situations when it is not. I’ll walk through what memoization is, how to use it, and when you should use it in your code.

Memoization. What is it?

In the simplest form, think of memoization as a cache. It is a programming concept that allows developers to save the results of some function in such a way that additional calls with the same parameters do not warrant the need for unnecessary processing. Typically, this is useful for pure functions which based off certain inputs (we’ll call these parameters), will produce the same output. As you can imagine, this concept is clearly a key tool when developing code that calls the same function multiple times to produce some calculated result.

For example, think of building a chart component in React using TypeScript. As new data is provided to the chart component, logic must exist to calculate the coordinates to draw the chart. By using memoization, the developer has the ability to cache the calculated results of determining the chart coordinates for future use. This saves the need to unnecessarily recalculate the coordinates given the same data set, thereby producing a more efficient application.

When should I memoize?

It can be tempting for a developer to want to memoize frequently. After all, if I process once and save the results, wouldn’t this be faster for future results? Well, not necessarily. It’s important to consider the overhead cost involved with memoization. For example, if we are writing a function with parameters expected to change frequently, there is a cost incurred with saving the results in a cache on the client. In typical use cases, the likelihood of having to call the function again with the same parameters would likely be rare. In these cases, the benefits for memoization is minimal.

On the flip side of the coin, there are many cases when it is absolutely beneficial to memoize functions. There are a few things to consider when evaluating whether to memoize. For example, consider how complex the logic is within a function. From a system resource perspective, how expensive is it to execute the logic within a function once? Many times? If the complexity is relatively trivial, the overhead involved in memoizing a function may not be worth it. How often do we expect the function to be called with the same parameters? This has a direct impact on the value offered by memoized functions. If we expect the same function to be called several times, where each time the same output will be produced given the same inputs, then this is a great candidate for memoization.

How do I memoize?

There are a few tools developers have on their toolbelt for memoization. Coming from the world of frontend development, I’ll give an example using React. Given the relatively modern introduction of React Hooks, a hook by the name of useMemo exists to solve this problem. If you are unfamiliar with React Hooks, I highly encourage you to learn more about them. Check out more documentation about Hooks here. The useMemo hook allows the developer to provide a pure function with an array of variable dependencies. The array of variable dependencies is expected to trigger a new execution of the memoized function when any of the dependent variables change. It is important to remember that the function passed to the useMemo hook does not accept parameters. This is because any existing parameters that are referenced in the method should already be within scope when called. See this page for more information about this topic.

Additionally, it’s worth mentioning the useMemo hook, like all other React Hooks, rely on functional components in React. This means they will not work with React class-based components.

There is another memoization tool available using Lodash. For those who may not be familiar, Lodash is a third party JavaScript utility library with several reusable functions for developers. When building class-based components in React, this is a great alternative because the useMemo hook is not available. This function is called memoize in Lodash. Check out more information here.

That’s cool. Now what?

All in all, it’s clear that memoization can be a powerful tool when used correctly. I highly recommend you check out the resources mentioned above to evaluate whether it’s right for your app. Go forth and memoize!