Тёмный

Mastering React Memo 

Jack Herrington
Подписаться 178 тыс.
Просмотров 132 тыс.
50% 1

React.memo, useMemo, useCallback, should you use them? When should you use them? Lets improve your React coding skills right now!
👉 I'm a host on the React Round-Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
👉 VS Code theme and font? Night Wolf [black] and Operator Mono
👉 Terminal Theme and font? oh-my-posh with powerlevel10k_rainbow and SpaceMono NF
0:00 Introduction
0:44 Project Setup
4:22 Using React.Memo
6:35 Traditional Memoization
8:49 How React Memoizes
11:57 When You Should Memoize
14:11 Renaming React.Memo
14:24 Should You Use React.Memo?
14:49 Don't Sweat Re-Renders Too Much
17:51 useMemo
21:02 useMemo Examples
23:43 useCallback
25:40 5 Things To Remember
26:38 Outroduction
#react #useMemo #useCallback #react.memo

Наука

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 422   
@onebronx
@onebronx 2 года назад
Jack, I think you should use "reference identity" instead of "referential integrity". The "referential integrity" is a term from a relational database theory and it is a guarantee that all references (foreign keys) point to existing entities and there are no "dangling" references/pointers in your database (or application state). For example, in a normalized Redux store it would mean that if a post object in a "posts" collection has a list of IDs of "comments" (a foreign key form "posts" to "comments"), then all comments referred by the post must be present in the "comments" collection in the store. In a normalized store posts do not keep direct references to comments, only IDs, so it becomes important to care about the referential integrity, as it does not happen naturally. The "reference identity" OTOH is just a special case of an equivalence relation, which guarantees equality of two referenced objects if and only if the references point to the same object ("shallow equality") but ignores structural equivalence ("deep equality"). React relies on the reference identity AKA "shallow equality" of two objects. It does not care about referential integrity, like lack of dangling references in your application state.
@jherr
@jherr 2 года назад
Fair enough. I'll do that in videos that folow.
@sahej97
@sahej97 2 года назад
How did you manage to write such a big comment?
@onebronx
@onebronx 2 года назад
@@sahej97 using a PC instead of a phone :)
@raymondmichael4987
@raymondmichael4987 2 года назад
@@sahej97, this means he knows these things and followed the video to the end, which implies that, Jack is real good. Keep it up guys, we're luck to have people like you
@raymondmichael4987
@raymondmichael4987 2 года назад
@@jherr, I watched the whole video. I'm waiting for the next video. Thanks for helping us out
@bythealphabet
@bythealphabet 2 года назад
Great content Jack, thank you for taking the time to explaining React Memo so clearly.
@nicholasfane1081
@nicholasfane1081 2 года назад
These videos are gold Jack, it's hard to find such high quality and down to earth tutorials like these. Keep it up!
@Gringo0517
@Gringo0517 2 года назад
Recently discovered your channel and have found it extremely valuable! Liked and subscribed. You have a very clear way of explaining things that I have been struggling with for quite a while :D Thanks and hope your motivation stays high for creating more content!
@dastansito
@dastansito 2 года назад
These Mastering React Hooks series are really, but really helpful. I can't thank you enough for everything I'm learning from this. Keep it going!
@mirajaryal3322
@mirajaryal3322 2 года назад
Been looking at lots of videos and reading a lots of articles but couldn't get my head around when and on what these hooks must be used. And with this video everything is crystal clear. Was such a simple concept. Thanks Jack for this great video. Been following your a while for quality content.
@leszekmodrzejewski7372
@leszekmodrzejewski7372 Год назад
I have seen dozens or even hundreds of youtube tutorials and this one is one of the best. Great content. I like most that the information is coherent, forming a whole. It is explained in detail. The pace and tone of Jack's voice are engaging. Fantastic job 👏👏👏
@geralt36
@geralt36 Год назад
Your videos are always so clear, detailed and to the point. Every time I click on one of your videos and think I know about the subject, I always end up learning something new. Thank you for sharing your knowledge with us!
@sergemorales8709
@sergemorales8709 10 месяцев назад
Hey Jack, just wanted to drop a quick message to say thanks for the video! I've been following your content for quite a while now, and I gotta say, you're hands down the best I've come across. I've learned so much from you, not just about coding but also your logical and concise explanations. Thanks again, really appreciate it!
@mohsinwaseem9770
@mohsinwaseem9770 Год назад
This is the best video I have seen on the topic. From giving the concepts to telling its pros cons with correct usage. All things are included in depth summarized in this 27 min tutorial. Hope you channel grows
@alimohammadi1517
@alimohammadi1517 2 года назад
Amazing content as always , really can tell that this vids are professional because of how fluent you are with the syntax , the examples and the visuals of the video overall everything is very pleasing thank you
@me_rinta
@me_rinta Год назад
Very helpful video. Straight to the point, examples and comparisons included. Definitely cleared up a lot of my questions about React memoization. Thank you 🙏🏻
@Will4_U
@Will4_U 2 года назад
Fantastic explanation! Personally, I was struggling and confused about using memorization in React, but this video definitely helped me to understand this topic. Thanks Jack ❤
@alexanderkuznetsov634
@alexanderkuznetsov634 2 года назад
Thank you again! So clear explanation! That is the main difference between junior and senior-level developers - it`s when you can provide a clear explanation to your "team members".
@adnanahmed4176
@adnanahmed4176 Год назад
Your explanation skills and demo demonstrations are so amazing! Great videos!
@DavidCCR
@DavidCCR 2 года назад
Really great explanation. Your videos are getting better and better! Thanks a lot!
@lsowein
@lsowein 2 года назад
Thank you! I really enjoy your content. Always concise and insightful! Great editing btw :)
@arsalanhussain6499
@arsalanhussain6499 Год назад
The way explianed memoization comparing to traditional memorization was just amazing. in fact you just thought me how memizationreally works under the hood in react. the part where you mentioned when to or not to use moemo in react was also great example to understand the need for memo. thank you very much🙂
@EnesKab
@EnesKab 2 года назад
Thank you Jack ! I was looking forward to this. I am going to do few experiments for my own cases, but after that video, I feel better and less stressful about re-rendering I guess 😊
@juandsoto1651
@juandsoto1651 2 года назад
This is something really important that almost anybody takes the time to explain. Thank you so much and keep on this kind of amazing vids!
@maxklammer3370
@maxklammer3370 2 года назад
Thank you Jack! :) Every time I come to you channel I learn something new :)
@sideshowlol
@sideshowlol 2 года назад
From the moment you casually typed “zoom” as a css property (which I didn’t realise was even a thing), I knew this was going to be a good’un. Thank you, Jack. Wonderfully clear explanations. 🙏😎
@mattlennon3
@mattlennon3 2 года назад
Excellent breakdown, I think the part on renaming the function in your head is critical to understand this function for what it actually does. Really well edited video too, I'm looking forward to more from your channel!
@rism8345
@rism8345 Год назад
Goddamn! Mm-mm-mm! You took them tutorials on the next level with these transitions and the chapter titles! Probably the best React/Typescript youtube channel out there. Thank you so much for the hard work, can't wait to see you have 500k+ subs on your channel.
@vitorwindberg4212
@vitorwindberg4212 2 года назад
The explanation about VDOM and DOM was amazing, I didn't know any of how that worked in React and I bet a lot of people don't as well. Thank you for your videos!
@djitaispector2329
@djitaispector2329 2 года назад
Thank you for this. I've been watching several videos from you, and they are all great. You go deep and into details, and throughout the way you teach a lot of small things that can help build the bigger picture. I'm interested to know about your career history, can you make a video about that? like when you started to program, what languages, frameworks, talk about the evolution of computer science from your aspect and so on... Cheers! (btw finally subscribed!)
@down__lo7359
@down__lo7359 2 года назад
"React Memo" == "Render if the props have changed"
@CHN-yh3uv
@CHN-yh3uv Месяц назад
Why isn’t this the default behavior though?
@xieweiling7543
@xieweiling7543 2 года назад
The best and most thorough explanation I've ever seen! Fantastic!👍
@permanar_
@permanar_ 2 года назад
This is really on a whole another class. Rich information yet so compact at a time. Thank you!!
@artyomkorbut5623
@artyomkorbut5623 2 года назад
Great video, Jack! Thank you so much for your work! Keep it going.
@sourabhkulkarni1731
@sourabhkulkarni1731 Год назад
Loved your explanation. I subscribed immediately!!
@alii4334
@alii4334 Год назад
The best tutorial on YT I've ever watched about the topic!
@mcfliermeyer
@mcfliermeyer Год назад
I had about a week of building an app using some components I didnt understand that seemed to require useCallback. I kept getting stale state from it. Now I understand why! Thank you much!!!!
@vladandreit
@vladandreit 2 года назад
Wow. These kind of videos i need learning react. I'm getting tired about all the crash courses(these are good for getting to know react)or full stack whatever and everybody talks about all the basics for begginers. Your videos are taking my understanding about react to a new level. Thank you. I hope you cover more and more advanced stuff because you explain them so well. Like a teacher.
@jherr
@jherr 2 года назад
Check the channel, I think you'll find there are enough advanced topics videos to keep your happy for a while. :)
@retinafunk
@retinafunk 2 года назад
I watched a lot of other docs and tutorials on those hooks and now finally I feel understand this properly, even if I used it many times already successfully now I get the fine details and differences and also when not to use them
@swapnilsingh7553
@swapnilsingh7553 Год назад
Hi Jack, Extremely grateful for this insightful Mastering React series, a small correction at 18:30, I assume you meant to click on the Re-Render app button instead of the Change color button to demonstrate the memo failure with object type parameters.
@axe-z8316
@axe-z8316 2 года назад
wow the content is getting so much better ! great video !
@boopfer387
@boopfer387 Год назад
Jack one of the best breakdowns I've seen on React Memo thank you very much!
@vigyanhoon
@vigyanhoon 2 года назад
I love the way you jump to code instead of wasting time on talking like others. Keep it up!
@vigyanhoon
@vigyanhoon 2 года назад
Thanks for this, my useMemo and virtual dom concept wasnt much clear before I watched this. Thanks.
@kyriakosbekas
@kyriakosbekas Год назад
Great explanation Jack! Thank you for your content!!
@lucaszapico926
@lucaszapico926 Год назад
Thanks for the video! Comprehensive, straight forward and thorough. 🙏
@alisonhj
@alisonhj 2 года назад
Thank you for your amazing explanation! You made it so much clear to understand!
@thehaptiK
@thehaptiK 2 года назад
that transition at 0:45 is NICE.
@ukaszzbrozek6470
@ukaszzbrozek6470 2 года назад
Great stuff ! This topic was always confusing to me. Thanks !
@mdnamussakib8077
@mdnamussakib8077 Год назад
Great Video. Thanks soo much. The whole react memo became very clear for me.
@MistaT44
@MistaT44 2 года назад
One of the best channels out there! Thank you
@minsaf8216
@minsaf8216 2 года назад
Found exactly what I've been looking for. Great explanation. Clear and easy to understand. Please do a series on advance react concepts
@jherr
@jherr 2 года назад
So what would you consider advance React concepts?
@minsaf8216
@minsaf8216 2 года назад
@@jherr concept like Error boundaries, custom hooks
@jherr
@jherr 2 года назад
@@minsaf8216 Cool. I actually have covered those a bunch, just not in their own videos. I'll have to think of a good way to do that specifically for its own video.
@krishgarg2806
@krishgarg2806 2 года назад
Thanks! Really nice and informative video, and again thanks for taking my suggestion :)
@jherr
@jherr 2 года назад
It was a good one!
@akramadil7502
@akramadil7502 2 года назад
Thank you, your explanation way is so amazing and I learned a lot and how you use examples is great.
@anncascarano8589
@anncascarano8589 2 года назад
Hey Jack! I really appreciate the deep dives. Thank you!
@raymondmichael4987
@raymondmichael4987 2 года назад
I watched several videos on this channel, and I see all new videos ; To my surprise, I wasn't a subscriber to the channel yet!! 🙆🏾‍♂️, Subed now 🤓
@andenetalexander5244
@andenetalexander5244 2 года назад
By farrrrrrrrrrrrrrrrrrrrrrrrrr the best tutorial on those topic out there. Greate explanation! 👏
@talhaibnemahmud
@talhaibnemahmud Год назад
Excellent video as always ❤️
@sukeshkumard6064
@sukeshkumard6064 2 года назад
The best and detailed explanation on memo. Thank you so much.
@brilliantatosam6882
@brilliantatosam6882 Год назад
Great content. You're a wonderful teacher. Keep up the good work, Sir.
@ajstimson
@ajstimson Год назад
Jack's discussion of "Don't Sweat Re-Renders Too Much", was eye opening. Thanks for explaining it in reference to old jQuery methods!
@user-oy4kf5wr8l
@user-oy4kf5wr8l 2 года назад
Great great video!! U explained the useMemo so well !!!
@b29gupta
@b29gupta 2 года назад
Hey! Jack, Thanks for explaining the memoization. This explanation really cleared the concept and usage well. Can you also create a video on redux-thunk vs redux-saga. That would be real great. Thanks again
@atuldubey8146
@atuldubey8146 Год назад
Best explanation for memoization on RU-vid.
@JulioDx3480
@JulioDx3480 2 года назад
Extremely good explanations, thank you!
@jarrettyew
@jarrettyew 2 года назад
Great explanation! Was referring the official react doc but it wasn't as clear as this video!
@hamdinahdi899
@hamdinahdi899 2 года назад
awsome and comprehensive explanation thanks a lot
@mirtanvirahmed3868
@mirtanvirahmed3868 2 года назад
i liked the video before even watching.. I know it will be a great one 💯
@trenthm
@trenthm Год назад
Another great video! Thanks!
@topsoilgargoyle
@topsoilgargoyle 2 года назад
Jack, i have avoided using memoization in React for a long time. I've read blogs, watched tuts, without success. You're lesson here has just made everything click! Your preparation and relevant information are extremely valuable. Thank you very much.
@jherr
@jherr 2 года назад
You should still avoid it tho. No reason to use it unless you have a genuine performance issue.
@batumanav
@batumanav Год назад
This was purely informative, thank you so much.
@haroldpepete
@haroldpepete 2 года назад
you've got a new subscriber sr, you have the craft or art of teach good and clear
@marcelsdev
@marcelsdev 2 года назад
Jack, awesome videos like always, and great detailed explanation. One thing, just before your "5 Things To Remember" section, your video background tilts and slides away - At that moment I looked away and from the corner of my eye it looked like my screen was falling off my desk! Hahahaha, I got a fright there for a split second! 🤣
@jherr
@jherr 2 года назад
Hahah, I'll put a warning on the net one. :P
@designdeveloprepeat651
@designdeveloprepeat651 2 года назад
Awesome, subscribed!
@Chrosam
@Chrosam 2 года назад
Always great videos
@444ous
@444ous 2 года назад
Jack you are an amazing teacher! Thank you for this video!
@rafaelnunes6918
@rafaelnunes6918 Год назад
Thanks, this was the best explanation I've ever heard.
@dazjacktar6202
@dazjacktar6202 2 года назад
Thanks mate, perfect explanation!
@cayque_freitas
@cayque_freitas 2 года назад
Hey, thank you for this awesome video! Really good explanation :)
@diyaagubarah3328
@diyaagubarah3328 Год назад
best explanations ever I love your way for teaching.
@philipkearney3795
@philipkearney3795 2 года назад
Great stuff Jack!
@Billy_98
@Billy_98 2 года назад
Amazing job!!! I hope u will get that Silver Play Button soon. Big like!
@vikram87in
@vikram87in Год назад
Great video. Subscribed!
@utkarshsrivastava4106
@utkarshsrivastava4106 Год назад
You can tell right away by his thinking out loud, that he is a senior developer xD. Thank you for your amazing content :)
@tazimmahta7625
@tazimmahta7625 Год назад
8:51 ""it compares the previous props with new props. And when those props have changed it re-renders. Thats all memorization is. "". Missed that in an interview :')
@thebattinson1278
@thebattinson1278 2 года назад
This is GOLD ! Thank you.
@oliver_ai
@oliver_ai 2 года назад
Thank you for the masterclass on these topics
@balzale
@balzale 2 года назад
Awesome content Jack! Me once again with the questions. Would you share how you set up you VS Code in a vid?
@jherr
@jherr 2 года назад
Yep, it's on the list.
@esmaeilmirzaee
@esmaeilmirzaee 2 года назад
Thank you so much, Mr. Herrington. It is really informative and well explained.
@jherr
@jherr 2 года назад
It's Herrington. :) And, thank you.
@esmaeilmirzaee
@esmaeilmirzaee 2 года назад
@@jherr Sorry, my bad. I corrected it.
@jurajstekla5876
@jurajstekla5876 Год назад
Perfect video. So helpful. Btw.. which extension do you use for code completion ?
@jherr
@jherr Год назад
Github Copilot
@someshmusunuri4233
@someshmusunuri4233 2 года назад
best explanation with example. Thankyou
@haribhushan
@haribhushan Год назад
JACK your way of teaching makes you the best teacher i have ever seen .I am super impressed by the MFE video you explained .may i know what is that extension which is showing function output immediately
@SkillerChampion
@SkillerChampion Год назад
Thanks so much....this is a great video. I learnt alot 💯😍
@jijieats
@jijieats 8 месяцев назад
This was such a clear explaination!
@muhammadarsalanahmed5643
@muhammadarsalanahmed5643 Год назад
Thanks, what an incredible explanation ❤
@3ggr
@3ggr 2 года назад
very detailed and clear explanation 👍
@cuongduong257
@cuongduong257 2 года назад
Great content Jack, thank you!.
@marcintichoniuk6554
@marcintichoniuk6554 2 года назад
Hi Jack, great work as always! I have a question - should we always wrap our functions in useCallback if we pass them down as props? Because you mentioned that it is a good idea to wrap arrays and objects, which we create, in useMemo and I wonder if the same applies to functions.
@jherr
@jherr 2 года назад
Yeah, if you pass it down to another component, or to a custom hook, or return it from a custom hook, then it should be in a useCallback.
@allancmm
@allancmm 2 года назад
Great video, again!!!
@user-un9cs7zq5w
@user-un9cs7zq5w 2 года назад
Thank you, Jack. I learned a lot 😊
@shubhamlatiyan7972
@shubhamlatiyan7972 2 года назад
Thanks Jack, for the awesome video
@andreslikesramen
@andreslikesramen 2 года назад
best video on this subject thanks for helping me understand this better
@seniorreact9627
@seniorreact9627 2 года назад
Great video. Subbed
@sagarreddy7461
@sagarreddy7461 2 года назад
Awesome, thanks jack!!
Далее
Mastering React Batch Updating
10:23
Просмотров 43 тыс.
Making React Context FAST!
33:34
Просмотров 85 тыс.
What Should Be Next? 👀🤯
00:56
Просмотров 7 млн
Best tutorial💞🤗🕺🏻 #tiktok
00:11
Просмотров 689 тыс.
Mastering React's useEffect
25:20
Просмотров 170 тыс.
Five React App Killing Anti-Patterns 🪦😱
12:47
Просмотров 31 тыс.
You're Doing React Hooks Wrong, Probably
20:11
Просмотров 64 тыс.
3 React Mistakes, 1 App Killer
14:00
Просмотров 113 тыс.
Goodbye, useEffect - David Khourshid
29:59
Просмотров 494 тыс.
UseState: Asynchronous or what?
17:00
Просмотров 64 тыс.
Mastering async code with Typescript and Javascript
39:01
ВЫ ЧЕ СДЕЛАЛИ С iOS 18?
22:40
Просмотров 118 тыс.
ЛУЧШИЙ ПОВЕРБАНК ОТ XIAOMI
0:39
Просмотров 15 тыс.
ПОКУПКА ТЕЛЕФОНА С АВИТО?🤭
1:00