How to implement Memoization in your React projects

React is a very powerful frontend library and you begin to witness more of its power when you learn the intricate details of the features that it offers. If you are like me who is always interested in understanding the inner workings of the tools they are using, lean back and keep reading because this article has a lot of insights for you. Even if you are not very fond of intricate details, read on as I will try my best to make the write up enjoyable and insightful still.

What is Memoization?

Memoization is a programming technique that is used to cache the results of intensive processes so that you don't run the process over and over unnecessarily. So with memoization, you are basically asking a function (process) to remember (c ache) the result of the process so that it doesn't have to run the process again if the same input is supplied it. For example: Imagine you have a function that multiplies two numbers. If you do the multiplication of two numbers say 100 and 458, if you want to do the exact same computation again, you'll just get the previous value if you have implemented memoization since the inputs are the same.

In React, memoization is often used to ensure that components only re-render when it is absolutely necessary rather being re-rendered all the time. It is. important to note that when you are using memoization, you essentially trading memory for speed.

How to implement Memoization in React

It is common knowledge to most React developers that components are typically re-rendered when their states or props change. That said, the way memoization is implemented depends on the type of component you are using i.e. it is not implemented in the same manner for class and functional components. Let's go over how it works and how to implement it in each case.

In a functional components, when the component is rendered the first time, React takes a snapshot of that component and then uses it as a reference for the next time the component has to be re-rendered. When a re-render is about to happen, React will compare the newer version of the component with the cached snapshot (reference) of the component to verify if there has been any change in the value of its props. For props that are arrays or objects, React performs a shallow comparison. When the comparison is done and React confirms that there has been a change in the component's props, it goes ahead to re-render it, if not the component stays as it was without being re-rendered.

That is how memoization should work in functional components. However, you might witness some unexpected behaviors in specific scenarios like when you have directly mutated your state object, when the component has props that are functions, or when dealing with HOCs (Higher Order Components).

In the case of HOCs, when the props change on a parent component, child components within it will be re-rendered even when this change didn't affect the data within them. To fix such unnecessary behaviors you can wrap the child component within the useMemo hook. Check out the official documentation to learn more about this hook. The useMemo hook won't work in components with props that are functions. When dealing with functional props, you can make use of the useCallback hook instead. useCallback is used to cache function definitions between renders. Now let's look at memoization in class components.

In functional programming, there is the concept of pure functions and a pure function is one that for the same set of inputs it will return the same output and its output is strictly determined by its input values only. A react class component can either be a regular class component or a pure component (class components that extend the React.PureComponent class). Pure components render the same output for the same state and props. They have a shouldComponentUpdate() method that allows them to perform shallow comparison of states and props and then use the result of that computation to decide whether the component should be re-rendered or not. Building components that extend the React.PureComponent class will add memoization to their behavior. It really that simple.

Conclusion

Even though memoization is a great tools to have in your toolbox as a react developer, it isn't a feature that you should jump to using every time because even though it works great for caching the results of intensive or heavy processing computations, it still has some trade off like the hit it takes on your memory in exchange for speed optimization in your application. To drive my point home, you shouldn't start with memoization in all scenarios as there are other other optimization techniques that you can make use of that will add less overhead to your application when compared to memoization.