How Memo changes rendering?
Tags: webdev, react, javascript, tutorial
Published: 2023-02-14 14:51:47

As developers, we strive to achieve the best performance in our applications. One way to do that in React is to restrict the number of re-renders. There are many tools that we are outfitted with to do that. In this short article, I will focus on the memoization of the component.

## **What triggers re-renders?**

To better understand the subject, it is important to know how React triggers re-renders.

The component has three main reasons to render:

- when the state changes,
- when its parent renders (by default when the parent renders, all children also render),
- when the context changes (if the component is subscribed).

Out-of-the-box modern declarative frameworks mostly re-render too much.

To block re-renders we can use memo (or pure components in-class component, but we won’t focus on that). Using memo causes that component to “remember” props and compare them with new ones. When we are dealing with primitive types the situation is simple and clear, when we are dealing with more complex types behavior may differ.


![Fig. 1. Memo blocking render even though parent re-renders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9dcsvzw23borcok25ds.png)
##### Fig. 1. Memo blocking render even though parent re-renders

## How to use Memo

Here we have our children component. It takes props `checked` and `children`. We export this component as memoized.


![Fig. 2. Exporting component as memoized](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k425c87bpojuh1a5lqht.png)

##### Fig. 2. Exporting component as memoized

Now we will test it with different props and see when memo works and when it does not.

### Text and boolean

First, we try sending as a boolean checked and text as children.

![Fig. 3. Sending boolean and text to component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sgtzvcowfr8kcwsjz92v.png)
##### Fig. 3. Sending boolean and text to component

In this case, our memo won’t work and both parent and child will re-render every time we click on the checkbox. Why? Because the value of `checked` changes, and it influences the state of our `MemoizedComponent`.

What if we would get rid of this `checked` prop?

### Text as children

Here we are only sending children, which is normal text.


![Fig. 4. Sending only string as children](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rez82cg7lbnhjvkriew7.png)

##### Fig. 4. Sending only string as children

Our memo will work just fine because the `string` is **primitive**, which React compares by value not reference. But this situation rarely happens. Most of the time we send `JSX` as children, so what will happen then?

### JSX as children

Although, visual output will look exactly the same as in the previous case. Under the hood is happening something completely different and both child and parent will re-render every time we click the checkbox.


![Fig. 5. Sending JSX as children](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jtkz07xjwe7q7oxy2hm.png)

##### Fig. 5. Sending JSX as children

Why? Because every time when a parent is building its markup, this div is changed to `React.CreateElement` which is an **object**. Objects in JavaScript are compared by reference and that’s why a `MemoizedComponent` will always think that when parents re-renders prop changes even though nothing changes.

## Summary

React Memo works, but only in specific circumstances. Most of the time in real-life applications it won’t help much. It can be used in components that have a lot of markup or are static like `<Headers/>`,  `<Footer/>`, etc.

Your time will be better spent if you try to avoid prop drilling or go with hooks like useMemo or useCallback. But anyway always before you start optimizing your application try to profile it (using react devtools or similar). It’s important first to understand what is worth optimizing and spending your precious time on things that will improve performance.