🍿 The mystery of Memoization in React

Hey friend,

I have got to admit. I took the knowledge of Hooks I had for granted. I thought everyone knew what Memoization is and that useCallback and useMemo are simple hooks to learn.

Because I had experience working for so many years and building enterprise-level apps, so I thought that useCallback and memo were so common that I didn't even mention them.

When I started speaking at conferences and talking to the attendees, I realized I was wrong 😅.

Many thanked me and told me that they finally understood what Memoization was and the differences between the hooks

after 4 years of working in React.

That comment was very sweet and made my day, but I was shocked. Hence, I want to bridge the gap for all of you today.

Today, let's learn what Memoization is and how we can use it.

🍿Our Weekly Snack: Memoization in React

💡 Memoization is how the results of a function get cached so the program does not have to re-calculate those results. It is like caching.

Now, if we were to build a dark mode app, you can easily profile that app to see how often it re-renders. Here is how you can do so. Let's turn on the option to profile our app, aka measure its performance. Here is how we can do that. Go to Developer tools → Profiler.

Also, could you check this option, as we want updates to get highlighted when components re-render?

Once you click on "start profile 🔴," notice how the Logo and Footer keep flashing, which means it keeps re-rendering. You can totally avoid this, as we never want these components to keep re-rendering.

We can solve this by Memoizing the Logo and Footer. Here is how we can cache Logo so it won't be re-rendered.

Next week, we will learn useCallback, deal? 😉

Like this newsletter? Share it with friends and co-workers!

Share this newsletter

Latest Frontend Gossip/News 🤫

Starlight by Astro ↗️ is a new project on Product Hunt, it is a web framework for building modern documentation websites.

Wanna learn the Design Principles and the psychology related to UX, check out growth.design↗️ , where you will find a treasure trove of cool case studies.
A new AI model that you can prompt with UI designs, check it out here↗️
A great collection of Transhuman doodles, check here↗️
Remix v2 Pre-release is out↗️ . They are hiding v2 behind feature flags, which is quite neat.

The Frontend Developers Toolbox 🧰

A npm package ↗️ to use Tailwind CSS to style PDFs
A blog post ↗️ on How to create React Context inside Next.js
How you can fail as a new Engineering Manager ↗️

I hope you have a great day!