Mastering React Memo

  Переглядів 130,757

Jack Herrington

Jack Herrington

День тому

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

КОМЕНТАРІ: 417
@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
@thehaptiK
@thehaptiK 2 роки тому
that transition at 0:45 is NICE.
@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!
@bythealphabet
@bythealphabet 2 роки тому
Great content Jack, thank you for taking the time to explaining React Memo so clearly.
@adnanahmed4176
@adnanahmed4176 Рік тому
Your explanation skills and demo demonstrations are so amazing! Great videos!
@artyomkorbut5623
@artyomkorbut5623 2 роки тому
Great video, Jack! Thank you so much for your work! Keep it going.
@DavidCCR
@DavidCCR 2 роки тому
Really great explanation. Your videos are getting better and better! Thanks a lot!
@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 😊
@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
@down__lo7359
@down__lo7359 2 роки тому
"React Memo" == "Render if the props have changed"
@CHN-yh3uv
@CHN-yh3uv 3 години тому
Why isn’t this the default behavior though?
@lsowein
@lsowein 2 роки тому
Thank you! I really enjoy your content. Always concise and insightful! Great editing btw :)
@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!
@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.
@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!
@permanar_
@permanar_ 2 роки тому
This is really on a whole another class. Rich information yet so compact at a time. Thank you!!
@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!
@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 👏👏👏
@maxklammer3370
@maxklammer3370 2 роки тому
Thank you Jack! :) Every time I come to you channel I learn something new :)
@alisonhj
@alisonhj Рік тому
Thank you for your amazing explanation! You made it so much clear to understand!
@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!
@kyriakosbekas
@kyriakosbekas Рік тому
Great explanation Jack! Thank you for your content!!
@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 🙏🏻
@sergemorales8709
@sergemorales8709 9 місяців тому
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!
@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!)
@sourabhkulkarni1731
@sourabhkulkarni1731 Рік тому
Loved your explanation. I subscribed immediately!!
@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
@mdnamussakib8077
@mdnamussakib8077 Рік тому
Great Video. Thanks soo much. The whole react memo became very clear for me.
@lucaszapico926
@lucaszapico926 Рік тому
Thanks for the video! Comprehensive, straight forward and thorough. 🙏
@xieweiling7543
@xieweiling7543 2 роки тому
The best and most thorough explanation I've ever seen! Fantastic!👍
@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.
@boopfer387
@boopfer387 Рік тому
Jack one of the best breakdowns I've seen on React Memo thank you very much!
@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!
@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 ❤
@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
@ukaszzbrozek6470
@ukaszzbrozek6470 Рік тому
Great stuff ! This topic was always confusing to me. Thanks !
@alii4334
@alii4334 Рік тому
The best tutorial on YT I've ever watched about the topic!
@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🙂
@vigyanhoon
@vigyanhoon Рік тому
Thanks for this, my useMemo and virtual dom concept wasnt much clear before I watched this. Thanks.
@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".
@sukeshkumard6064
@sukeshkumard6064 2 роки тому
The best and detailed explanation on memo. Thank you so much.
@axe-z8316
@axe-z8316 2 роки тому
wow the content is getting so much better ! great video !
@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. 🙏😎
@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!
@anncascarano8589
@anncascarano8589 2 роки тому
Hey Jack! I really appreciate the deep dives. Thank you!
@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.
@andenetalexander5244
@andenetalexander5244 2 роки тому
By farrrrrrrrrrrrrrrrrrrrrrrrrr the best tutorial on those topic out there. Greate explanation! 👏
@MistaT44
@MistaT44 2 роки тому
One of the best channels out there! Thank you
@batumanav
@batumanav Рік тому
This was purely informative, thank you so much.
@JulioDx3480
@JulioDx3480 2 роки тому
Extremely good explanations, thank you!
@akramadil7502
@akramadil7502 2 роки тому
Thank you, your explanation way is so amazing and I learned a lot and how you use examples is great.
@thebattinson1278
@thebattinson1278 2 роки тому
This is GOLD ! Thank you.
@dazjacktar6202
@dazjacktar6202 Рік тому
Thanks mate, perfect explanation!
@jijieats
@jijieats 7 місяців тому
This was such a clear explaination!
@hamdinahdi899
@hamdinahdi899 Рік тому
awsome and comprehensive explanation thanks a lot
@muhammadarsalanahmed5643
@muhammadarsalanahmed5643 Рік тому
Thanks, what an incredible explanation ❤
@talhaibnemahmud
@talhaibnemahmud Рік тому
Excellent video as always ❤️
@krishgarg2806
@krishgarg2806 2 роки тому
Thanks! Really nice and informative video, and again thanks for taking my suggestion :)
@jherr
@jherr 2 роки тому
It was a good one!
@brilliantatosam6882
@brilliantatosam6882 Рік тому
Great content. You're a wonderful teacher. Keep up the good work, Sir.
@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!!!!
@vigyanhoon
@vigyanhoon Рік тому
I love the way you jump to code instead of wasting time on talking like others. Keep it up!
@trenthm
@trenthm Рік тому
Another great video! Thanks!
@someshmusunuri4233
@someshmusunuri4233 Рік тому
best explanation with example. Thankyou
@user-oy4kf5wr8l
@user-oy4kf5wr8l 2 роки тому
Great great video!! U explained the useMemo so well !!!
@designdeveloprepeat651
@designdeveloprepeat651 2 роки тому
Awesome, subscribed!
@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 :')
@oliver_ai
@oliver_ai 2 роки тому
Thank you for the masterclass on these topics
@cuongduong257
@cuongduong257 2 роки тому
Great content Jack, thank you!.
@cayque_freitas
@cayque_freitas 2 роки тому
Hey, thank you for this awesome video! Really good explanation :)
@444ous
@444ous 2 роки тому
Jack you are an amazing teacher! Thank you for this video!
@user-un9cs7zq5w
@user-un9cs7zq5w 2 роки тому
Thank you, Jack. I learned a lot 😊
@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 🤓
@jarrettyew
@jarrettyew 2 роки тому
Great explanation! Was referring the official react doc but it wasn't as clear as this video!
@atuldubey8146
@atuldubey8146 Рік тому
Best explanation for memoization on UKposts.
@sagarreddy7461
@sagarreddy7461 2 роки тому
Awesome, thanks jack!!
@someone9493
@someone9493 2 роки тому
Superb, thank you!
@rafaelnunes6918
@rafaelnunes6918 Рік тому
Thanks, this was the best explanation I've ever heard.
@philipkearney3795
@philipkearney3795 2 роки тому
Great stuff Jack!
@diyaagubarah3328
@diyaagubarah3328 Рік тому
best explanations ever I love your way for teaching.
@3ggr
@3ggr Рік тому
very detailed and clear explanation 👍
@ishan101
@ishan101 2 роки тому
Thank you, this is really impressive and clear.
@abdelrahmanmagdy8946
@abdelrahmanmagdy8946 2 роки тому
Thank you clear explanation
@shubhamlatiyan7972
@shubhamlatiyan7972 2 роки тому
Thanks Jack, for the awesome video
@julianfmartinez
@julianfmartinez Рік тому
Clear explanation, now I get it, thank you.
@Chrosam
@Chrosam 2 роки тому
Always great videos
@andreslikesramen
@andreslikesramen 2 роки тому
best video on this subject thanks for helping me understand this better
@haroldpepete
@haroldpepete 2 роки тому
you've got a new subscriber sr, you have the craft or art of teach good and clear
@SkillerChampion
@SkillerChampion Рік тому
Thanks so much....this is a great video. I learnt alot 💯😍
@mohammedsaadeh7816
@mohammedsaadeh7816 2 роки тому
thanks, great content
@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.
@fooked1
@fooked1 Рік тому
Probably the best explanation on this topic.
@davitbokuchava6767
@davitbokuchava6767 Рік тому
It was really great explanation, Thanks a lot.
@nancy7160
@nancy7160 10 місяців тому
Thanks so much!!
@quoccuong1733
@quoccuong1733 2 роки тому
awesome refresher
@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
@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!
@mirtanvirahmed3868
@mirtanvirahmed3868 2 роки тому
i liked the video before even watching.. I know it will be a great one 💯
@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.
@jerviemarquez5192
@jerviemarquez5192 3 місяці тому
Thanks Jack!
@allancmm
@allancmm 2 роки тому
Great video, again!!!
@andriyfm
@andriyfm 2 роки тому
Love it. Thank you
Mastering React Batch Updating
10:23
Jack Herrington
Переглядів 43 тис.
когда одна дома // EVA mash
00:51
EVA mash
Переглядів 8 млн
Повістки у Києві: «Яке право вони мають забирати всіх мужиків?» #війна #мобілізація #військові
00:41
Слідство.Інфо | Розслідування, репортажі, викриття
Переглядів 1,6 млн
UseState: Asynchronous or what?
17:00
Jack Herrington
Переглядів 63 тис.
You're Doing React Hooks Wrong, Probably
20:11
Jack Herrington
Переглядів 63 тис.
No const! How NOT To Give A JavaScript Talk
10:28
Jack Herrington
Переглядів 9 тис.
Five Clever Hacks for React-Query and SWR
40:09
Jack Herrington
Переглядів 57 тис.
Are Your React Components Too BIG?
12:20
Jack Herrington
Переглядів 21 тис.
Common React Mistakes: useEffect - Part 2
20:44
Jack Herrington
Переглядів 25 тис.
React 18's New State Hook You've Never Heard About
22:11
Jack Herrington
Переглядів 87 тис.
Common React Mistakes: useEffect - Part 1
19:57
Jack Herrington
Переглядів 45 тис.
Goodbye, useEffect - David Khourshid
29:59
BeJS
Переглядів 491 тис.
Preventing React re-renders with composition
12:11
Developer Way
Переглядів 13 тис.
НЕ ПОКУПАЙТЕ НОВЫЙ СМАРТФОН, ПОКА НЕ ВЫШЕЛ ЭТОТ [2024]
13:25
Thebox - о технике и гаджетах
Переглядів 15 тис.
Клавиатура vs геймпад vs руль
0:47
Balance
Переглядів 609 тис.
''Бесплатные умные'' домофоны для глупых людей. За чей счет банкет?
12:48
Вадим Шегалов.Оккультные игры элиты
Переглядів 34 тис.
Я Создал Новый Айфон!
0:59
FLV
Переглядів 2,3 млн
НЕ ПОКУПАЙТЕ НОВЫЙ СМАРТФОН, ПОКА НЕ ВЫШЕЛ ЭТОТ [2024]
13:25
Thebox - о технике и гаджетах
Переглядів 15 тис.