React 19 Didn't Kill useMemo (Here's What Actually Did)

Did React 19 really make useMemo, useCallback and React.memo useless? That's what a lot of posts and tutorials claim, and it's only half true. React 19 itself didn't change how re-rendering works. Unless you turn on the React Compiler, your React 19 app re-renders exactly like a React 18 app, and you still need to know these hooks.

🎓 Join the live React class: https://kodyfier.com/courses/frontend/reactjs-online-class.php

In this video, we build a small demo app and watch the problem happen live. A simple state change makes the parent re-render, a child component re-renders with it, and an expensive function runs again on every click, even when nothing it depends on has changed.

Then we fix it step by step. You'll see how useMemo caches an expensive calculation so it only runs when its inputs change. Next, we find out why a child component can still re-render even after that fix: functions get a new reference on every render, so React thinks the props changed. Finally, we stabilize that function with useCallback and stop the extra renders.

By the end, you'll know exactly what each hook does, when it's worth using, and why React 19 alone doesn't remove the need for them. In Part 2, we'll turn on the React Compiler and delete these hooks, with proof that it works.

📌 Part 2 — React Compiler: [link]
🎓 Join the live React class: https://kodyfier.com/courses/frontend/reactjs-online-class.php


#React19 #useMemo #useCallback #ReactJS #WebDevelopment

------------------------------------------------------------------------------------
🔗 Useful Playlists

📘 Next.js Full Stack Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0lwvSBaIzzgV9X0ZiZ-42O&si=aQ_TNBNNx5L7V_bn

⚛️ React.js Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp1Rab71vx2zMF6qpwGDB2Z1&si=sDZRxsYNetYmojKd

💻 TypeScript Playlist:
https://youtube.com/playlist?list=PLwGdqUZWnOp0xfHQFmlL52b_6-QZ0mnk_&si=c4jfsd5ElDC1p0A5
------------------------------------------------------------------------------------
💸 Get All My YouTube Videos' Source Code for just ₹199! Grab Now - https://thapatechnical.shop/source-code

📺 Watch the complete Node.JS Playlist here :https://youtube.com/playlist?list=PLwGdqUZWnOp3KELplHtc-RnJ5xTUPqdgH&si=_ob8F88HYxCdspup

🔥 Access Source Code, PPT & Notes here for Free : https://www.thapatechnical.com/2024/11/introduction-to-nodejs.html
------------------------------------------------------------------------

🚀 Boost Your Skills with these Pre-Requisite Videos:

🔗 Best HTML Course - https://youtu.be/5ccq_nLHneE
🔗 Best CSS Course - https://youtu.be/MSICFljRcb4
🔗 JavaScript Basics Course Part 1 - https://youtu.be/13gLB6hDHR8
🔗 JavaScript Advanced Course Part 2 - https://youtu.be/YwsOCN8woA8

------------------------------------------------------------------------
💸 Build Your Own E-commerce Website for Free! - https://www.thapatechnical.com/2024/03/build-complete-ecommerce-website-using.html

------------------------------------------------------------------------
✌️ Join Us!

🚀 Become a Member: Unlock perks, free source code, and more Join Now : https://www.youtube.com/channel/UCwfaAHy4zQUb2APNOGXUCCA/join
📷 Connect on Instagram: https://www.instagram.com/thapatechnical
🗨️ Join Our Discord Server: Hang out with fellow programmers Discord Link: https://discord.gg/MdScmCsua6

------------------------------------------------------------------------

⌛TIMELINE⏳
0:00 The React 19 Myth
1:15 Our Demo App
2:15 Join the Live React Class
3:00 Code Walkthrough
4:58 The Child Component
7:10 The Expensive Function Problem
10:25 Fixing It with useMemo
12:16 Why Does the Child Still Re-render?
14:10 Stabilizing Functions with useCallback