Not so Secret Performance Improvement Technique 🚀

Hey friend,

A few years ago, I travelled to 15 different countries and gave talks at 15+ conferences across the globe 🌎. It was the best time of my life, and even though I was uncomfortable, I pushed myself to go after what I wanted. It all stopped after 2020 hit 🙄.

Yes, that's me taking a Selfie on Stage 😂 Too much coffee, I tell ya!

But guess what, I set a goal this year to give conference talks and travel again, and I'm happy to report that I'll be giving talks at 3 different conferences - Reactathon, ChainReact and App.js and all of them are on Performance 🚀.

Quick question for my Upcoming Course👇

I'm quite passionate about Performance and wanted to ask you.

Would you be interested if I were to create a course on React Performance that would cover more than the basic stuff?

If enough folks say 🤘 hell yeah!!! Then I'll add this to my list. But if not, then I won't, so please click one of the links to share your feedback with me!

🔥 Hell yeah, do it!!!
🫤 Not really, still trying to get better at React
👎 No, work on something else

Thanks so much, You are the best! 💖

Alright, over to our Snack: useMemo 🍿

In JavaScript, we only have one main thread, and we're keeping it super busy by running this code repeatedly.

Both useMemo and useCallback reduce the times a component needs to re-render. We want to do as little as possible to draw the UI 🎨.

What is useMemo? 🤔

with useMemo, we are telling React to only recalculate the value based on dependencies.

useMemo is like a cache, so we are telling only to do this task when this specific dependency changes. useMemo checks for arrays and objects.

Okay, enough theory 😅, let's look at our snack 🍿

With useMemo, the expensive computation would be executed every time the component re-renders, even if the color state has stayed the same.

🐢 This can lead to slow rendering times

➗ And a poor user experience, especially when dealing with costly calculations.

Using useMemo, we tell React to store the result of the expensive computation and only recompute it when the specified dependency (color) changes.

✖️ This helps to minimize the number of times the computation is executed

⬆️ This can significantly improve the component's performance and overall user experience.

Developer to Leader Program 💖

I am so close to launching a program called Developer to Leader that will teach you how to become a successful Engineering Leader.

This program is for you if you want to lead, transition to Leadership or a newer or an existing Leader that wants to be more successful and confident!

Check out the landing page 🔥

The program will be released in Early Access on May 2nd at 10:00 AM EST (7 AM PST, 3 PM GMT, 4 pm CET, 7:30 pm IST). If you like to take advantage of Early Access pricing, add yourself to the Waitlist. If you'd like, you can click here to add a calendar reminder. 📅

Add to the waitlist ✨

This is a magical link that will automatically add you to the waitlist

Latest Frontend Gossip/News 🤫

Next.js 13.3 is out 🔥 - check the latest updates here.

Youtube Videos 💖

I have recorded 2 videos on my channel, and many more are coming up.

How I would learn to code if I were to start again
How to become a Great Leader in 2023 (Badass one)

The Frontend Developers Toolbox 🧰

HeadShot Pro: No need to head to a studio. Click your best Linkedin Profile pic with Headshot pro
Coding Interviews made easy: If you are looking for a job, use Pramp to practice Coding mock interviews. Prep & land your dream tech job.

I hope you have a great day.

Not so Secret Performance Improvement Technique 🚀

Browse

Resources

Products