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?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 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:
π§© 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:
β β Latest Frontend NewsFind 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,
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 VideosCheck it out and subscribe to my channel βοΈ for more Frontend, Leadership and Career Development content. What do you think of today's Newsletter? Simply click on one of the links below.
|
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!
Hey Reader, I just got back from Amsterdam after speaking at React Summit and wow, what a week! π³π± I gave a talk called React Framework Showdown π₯, where I pitted Next.js, TanStack Start, and React Router v7 (aka Remix) against each other in a friendly battle. Why those three? Because they're leading the pack when it comes to modern React and honestly, each one brought something wildly different to the table. I'll share the talk when it's live, but for now, letβs hear it from this week's...
Hey Reader, Ever been stuck writing the same SQL queries over and over againβ¦ not because theyβre hard, but because someone on your team needed the data and didnβt know how to get it? Iβve been there. Whether itβs marketing asking, βHow many users signed up last week?β or product wondering, βDid anyone actually use that new feature?β, the questions are simple but the friction to get answers is very real. So I built something for that. Introducing: the AI Agent that talks directly to your...
Hey Reader, A couple years ago, I realized something unexpected: I was growing faster in my career not by doing more tutorials or chasing the next shiny framework but by finding a mentor. Want to level up your Next.js skills? β Find a mentor who has shipped production-ready apps. Want to get better at public speaking? β Find someone whoβs done it before. At one point, I had multiple mentors, each helping me with something specific. Their guidance made all the difference and helped me focus.It...