newsletter

How to avoid Re-rendering and my new course 🔥

Hey friend,

I've successfully launched my course on helping developers become Engineering Leaders. The Early Access launch went beyond my expectations.

If you are currently interested in becoming an Engineering Leader or will be in the future, remember this course is there for you! 💪 This covers everything you need to become a successful Engineering Leader.

Engineering Leadership: Build Solid Foundations is now on Udemy 💖

On the other hand, I've released the Foundation parts of the course to help you build a solid foundation on Udemy, too, so check it out. If you are not sure if y

​Here is a coupon for you to get the course for $19.99 for the next 48 hours!​

You can support me and the course by giving the course a 5⭐️ rating!

Quick favour from you 🙌

I'm now back to focusing on yet another course. I have a few ideas, but I want to hear from you.

What is something you are excited to learn more about? What is something you are struggling with, and you wish a course existed for this?

Hit reply and let me know, and I'll get back to you!

On another thought, I've been travelling for conference talks.

I gave a talk at many conferences this year and absolutely loved it 💖.

I have been to Reactathon in SF, California, App.js in Krakow, Poland and ChainReact in Portland, Oregon. I had a great time meeting amazing folks in the community, and I always left with a lot of energy.

Next week, I have a couple of Youtube videos dropping, subscribe to my channel if you haven't already.

Our Weekly Snack: React's Re-rendering Patterns

We are building an app for setting the dark mode with a dogecoin as the logo. You can see that the Toggle button handler is the one that toggles the dark mode. We also have a Footer with our company logo on it.

Here is a quick snippet.

Every time the Parent container i.e. App renders, Logo, Footer and Toggle Button re-renders. We want to only re-render when necessary. This process of caching and only purging cache when necessary is called Memoization.

In our case, we want to memoize the logo as we prefer to keep the logo from re-rendering. We want to cache the logo. This is how we can memoize it.

We also want to memoize the dark Mode handler as we only wish for the dark mode to change when we toggle it, not just when the parent re-renders.

This will only make it so that handleToggle will re-render when dark mode changes; otherwise, React's natural behaviour is to re-render whenever the parent renders. And we want to avoid it at all costs.

Latest Frontend Gossip/News 🤫

​Next.js 13.4 is out , which means the following is stable and no longer experimental.

  • React Server Components
  • Nested Routes & Layouts
  • Simplified Data Fetching
  • Streaming & Suspense
  • Built-in SEO Support

There are still bugs being discovered, and I've started upgrading my course to Next.js.

I still foresee that the above will take much longer to stabilize and will be brief, although it is exciting.

Ben Holmes (Contributor of Astro) is entertaining, as usual.

Astro is picking up speed; check out Ben building a blog in 1-minute. Astro is a

The Frontend Developers Toolbox 🧰

👉 Tell me a bit more about you

This newsletter has grown since I started it a few months ago. I’d love to get to know you a bit better. Can you please click one of the links below to best describe your situation,

​

I hope you have a great day!

A Frontend Newsletter that you'll love! 💖