Is it time to forget about useCallback & memo?


Hey friend,

This is one of the most exciting updates in the React ecosystem: the React Compiler โ†—๏ธ.

I am incredibly excited because we can now use the Next.js 15 RC โ†—๏ธ with this compiler and eliminate many React hooks we've been using, such as useCallback, useMemo, memo, and more.

If you prefer to watch the video instead, then check out my latest video here ๐Ÿ‘‡

How does React Compiler ACTUALLY work?

video previewโ€‹

Our Weekly Snack: Is it time to forget useCallback or useMemo?

First of all, why are we questioning this? Well, that's because React compiler is out.

What is React Compiler?

React Compiler is an automatic optimizer for React code. It analyzes your components and optimizes them for performance, reducing the need for manual memoization with hooks ๐Ÿช like useMemo, useCallback, and memo.

These hooks are currently used to prevent unnecessary re-renders of components based on whether their props or state have truly changed.

React Compiler will optimize your React code provided you follow the Rules of React โ†—๏ธ.

Now, not using hooks inside a function, function should always return the same output etc. are all part of the rules. These are rules we're aware of.

It can reduce the need for developers to manually add memoization code.

For example, you may not need to add useCallback and useMemo everywhere as React is going to optimize that for you.

Here is an example,

How you can get Next.js 15 React Compiler for a new project:

How can you enable React Compiler?

There are 2 modes:

  1. Opt-in
  2. Compile all Components

๐Ÿงฉ Opt-in mode: React Compiler can be enabled in annotation mode, which allows developers to control which components are optimized. This is seen in the left terminal.

โœจ Compile all components: Setting it to true will get all components to get optimized.

Is React Compiler a Silver Bullet?

While React Compiler is a powerful tool, it's essential to remember:

  • ๐Ÿ˜Ž Understanding Performance Optimization: A solid grasp of performance optimization techniques is still valuable. There might be situations where the compiler misses optimizations or requires your input for complex components.
  • ๐Ÿงช Experimental Stage: React Compiler is still under development, and its capabilities may evolve over time.

โ€‹

โ€‹

Latest Frontend News

Find out if people on Twitter ๐Ÿšข actually ship code or if they're just shiptalking with Ship Talkers โ†—๏ธ.

โ€‹GPT skeleton โ†—๏ธ converts your components into Skeleton UI. You can simply copy paste.

โ€‹Beautiful Gradients โ†—๏ธ ready to use for your projects or apps or to add a little whimsy to your apps.

Add sounds to your application for user clicks or to have some fun, with the use-sound hook โ†—๏ธ.

โ€‹Astro 4.10 is out โ†—๏ธ โœจ Changes include,

  • Easier environment variable management with a new astro:env module.
  • Broader rewrite functionality - now supports all HTTP methods.
  • Embed Astro components in server-side apps built with frameworks like PHP.
  • Streamlined Container API usage in Vite environments.

What if there was a Next.js form lib that does both client and server validation from one Zod schema, well, this is possible through conform โ†—๏ธ.โ€‹

โ€‹Tailwind released a new version โ†—๏ธ of `prettier-plugin-tailwindcss` โœจ that automatically cleans up unnecessary whitespace in your class lists

Weekly Youtube Videos

Check it out and subscribe to my channel โ†—๏ธ for more Frontend, Leadership and Career Development content.

Modern Authentication Tutorial with Next.js | Clerk, Lucia, TypeScript, Tailwind

video previewโ€‹

The Most Underrated feature in Nextjs 15
โ€‹
โ€‹

video previewโ€‹

What do you think of today's Newsletter? Simply click on one of the links below.

Ankita Kulkarni

Join 9200+ subscribers reading by weekly personalized Newsletter that helps developers level up their skills through weekly Frontend and Leadership Snacks. You get a deep dive into a Tech topic, Actionable tips to excel in your career and a toolbox!

Read more from Ankita Kulkarni
React 19.2 Activity

Hey Reader, Iโ€™ve been diving deep into React 19.2 and Next.js 16 Beta this week, and honestly, itโ€™s such a solid update. I have started to incorporate so many of the features in my Next.js Custom Course Platform and have seen massive improvements. But before we jump into this weekโ€™s snack, letโ€™s hear it from our sponsor. ๐Ÿ‘‡ But before that, let's hear it from our Sponsor. PRESENTED BY CODERABBIT AI Most AI test tools just throw random assertions at your code and call it โ€œcoverage.โ€ But they...

useEffectEvent

Hey Reader, This week was huge for web dev ๐Ÿš€. React 19.2 just landed with fixes for some of the most annoying bugs, Sonnet 4.5 dropped with major AI upgrades, and the ecosystem feels like itโ€™s moving faster than ever. Iโ€™ve rounded up the highlights (and why they matter) along with this weekโ€™s Snack for you below ๐Ÿ‘‡ But before that, let's hear it from our Sponsor. PRESENTED BY CODERABBIT AI Most AI code reviewers feel shallow, they look at syntax, patterns, maybe a guideline or two, but they...

use-cache

Hey Reader, Iโ€™ve got some fun news to share ๐ŸŽ‰ Iโ€™m beyond excited to share that Iโ€™ll be speaking at the official Next.js Conf ๐Ÿ’–. Iโ€™m one of the featured speakers (!!) and would love for you to join me. My talk is called:โ€œBuild. Scale. Teach: Architecting and Scaling a Production-Ready Modern Course Platform with Next.jsโ€ Make sure to sign up here and come hang out during my sessions ๐Ÿš€ And... I finally made the move to Italy ๐Ÿ‡ฎ๐Ÿ‡น. Back in 2019 I almost moved to Europe, but the world had other...