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 😅.
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.
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
Starlight by Astro ↗️ is a new project on Product Hunt, it is a web framework for building modern documentation websites.
I hope you have a great day!