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.
@@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
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!!!!
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".
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. 🙏😎
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.
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.
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
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.
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🙂
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!
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!
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.
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.
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 👏👏👏
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!
@@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.
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!
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
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 ❤
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!
Very helpful video. Straight to the point, examples and comparisons included. Definitely cleared up a lot of my questions about React memoization. Thank you 🙏🏻
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
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 😊
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 :')
/** * So we use combination between memo & (useMemo - useCallack) * memo is good for comparing value like string number * but when it comes to function,Array,Object props we must pass the reference for those to memo Component * and we do that by passing useMemo(Array,Object) - useCallback(callback) function to that memo component */
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! 🤣
Hi Jack, awesome video! I really learned a lot and it taught me a lot on why some of my old front end optimizations didn't work as intended. One small thing, at 18:30 you show off how React.memo breaks when we use reference types as props because React makes a new object every render. But in your example, you click on the change color button and not the rerender app button. In that case (the case of clicking the *change color* button) we would expect that both the memoized and non-memoized component should rerender because the color is different. Correct?
I had the same observation too. I think Jack meant to click on the Re-render button to prove his point, as he is doing later in 19:40 and in 20:25, after fixing the reference. Awesome video; thanks so much
Great tutorial as usual Jack, Keep it up! also, where do you live? I love those trees behind you. just two small notes : 1- at 18:57 I think by mistake you clicked changeColor button not rerenderApp button. 2- using Quokka made following up with this tutorial harder, what about the plain old clear console log statements?
Couple of questions, 1. when you test JS code what exstention do you use to run the code straight away and display in editor? 2. what do you use to autocomplete code for you?
Amazing video jack ... That comparison with loadash is great one to remember react.memo forever 🤘, just surprised that the button clicked times is not updating 🤔 is always 0 (oh my bad !! It's on color click 🤣)
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!)
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.
@26:36 my face when he slid across the room revealing that the background is a green screen :o :o :o Thats the most impressive green screen I have seen on youtube, it looks so realistic! Also, the transition between your hair and the background is pretty much not noticable. Much impress.
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.
Fair enough. I'll do that in videos that folow.
How did you manage to write such a big comment?
@@sahej97 using a PC instead of a phone :)
@@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
@@jherr, I watched the whole video.
I'm waiting for the next video.
Thanks for helping us out
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!!!!
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".
that transition at 0:45 is NICE.
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. 🙏😎
Me too 😂
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.
Check the channel, I think you'll find there are enough advanced topics videos to keep your happy for a while. :)
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.
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!
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
I love the way you jump to code instead of wasting time on talking like others. Keep it up!
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.
You should still avoid it tho. No reason to use it unless you have a genuine performance issue.
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🙂
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!
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!
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.
"React Memo" == "Render if the props have changed"
Why isn’t this the default behavior though?
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.
You can tell right away by his thinking out loud, that he is a senior developer xD. Thank you for your amazing content :)
The best tutorial on YT I've ever watched about the topic!
These videos are gold Jack, it's hard to find such high quality and down to earth tutorials like these. Keep it up!
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!
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 👏👏👏
Thank you Jack! :) Every time I come to you channel I learn something new :)
Thanks for this, my useMemo and virtual dom concept wasnt much clear before I watched this. Thanks.
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!
Best explanation for memoization on TH-cam.
Found exactly what I've been looking for. Great explanation. Clear and easy to understand. Please do a series on advance react concepts
So what would you consider advance React concepts?
@@jherr concept like Error boundaries, custom hooks
@@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.
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!
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
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 ❤
By farrrrrrrrrrrrrrrrrrrrrrrrrr the best tutorial on those topic out there. Greate explanation! 👏
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!
Jack's discussion of "Don't Sweat Re-Renders Too Much", was eye opening. Thanks for explaining it in reference to old jQuery methods!
The best and detailed explanation on memo. Thank you so much.
Jack one of the best breakdowns I've seen on React Memo thank you very much!
Thanks! Really nice and informative video, and again thanks for taking my suggestion :)
It was a good one!
Thanks for the video! Comprehensive, straight forward and thorough. 🙏
Very helpful video. Straight to the point, examples and comparisons included. Definitely cleared up a lot of my questions about React memoization.
Thank you 🙏🏻
The best and most thorough explanation I've ever seen! Fantastic!👍
Great content Jack,
thank you for taking the time to explaining React Memo so clearly.
One of the best channels out there! Thank you
Your explanation skills and demo demonstrations are so amazing! Great videos!
Great explanation Jack! Thank you for your content!!
Great Video. Thanks soo much. The whole react memo became very clear for me.
Great explanation! Was referring the official react doc but it wasn't as clear as this video!
This was purely informative, thank you so much.
i liked the video before even watching.. I know it will be a great one 💯
This video is a total life saver . Thanks for such a good video.
Really great explanation. Your videos are getting better and better! Thanks a lot!
¡Gracias!
Thank you so much!
Amazing job!!! I hope u will get that Silver Play Button soon. Big like!
Jack is hands down the best JavaScript teacher on TH-cam!
The only foreign teacher i've been subscribed. Thx from Russia, you are cool man)
Thanks! 😃
wow the content is getting so much better ! great video !
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
Thank you! I really enjoy your content. Always concise and insightful! Great editing btw :)
This is really on a whole another class. Rich information yet so compact at a time.
Thank you!!
Great stuff ! This topic was always confusing to me. Thanks !
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 🤓
Loved your explanation. I subscribed immediately!!
Great video, Jack!
Thank you so much for your work! Keep it going.
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 😊
Thanks, this was the best explanation I've ever heard.
The segment 'Don't sweat Re-renders to much' is personal favourite.
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 :')
Thank you for your amazing explanation!
You made it so much clear to understand!
/**
* So we use combination between memo & (useMemo - useCallack)
* memo is good for comparing value like string number
* but when it comes to function,Array,Object props we must pass the reference for those to memo Component
* and we do that by passing useMemo(Array,Object) - useCallback(callback) function to that memo component
*/
you've got a new subscriber sr, you have the craft or art of teach good and clear
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! 🤣
Hahah, I'll put a warning on the net one. :P
best explanations ever I love your way for teaching.
Hi Jack, awesome video! I really learned a lot and it taught me a lot on why some of my old front end optimizations didn't work as intended. One small thing, at 18:30 you show off how React.memo breaks when we use reference types as props because React makes a new object every render. But in your example, you click on the change color button and not the rerender app button. In that case (the case of clicking the *change color* button) we would expect that both the memoized and non-memoized component should rerender because the color is different. Correct?
Yes.
@@jherr awesome thank you for taking the time to validate my understanding
I had the same observation too. I think Jack meant to click on the Re-render button to prove his point, as he is doing later in 19:40 and in 20:25, after fixing the reference. Awesome video; thanks so much
This should be pinned because I was instantly thrown off by that.
Great tutorial as usual Jack, Keep it up!
also, where do you live? I love those trees behind you.
just two small notes :
1- at 18:57 I think by mistake you clicked changeColor button not rerenderApp button.
2- using Quokka made following up with this tutorial harder, what about the plain old clear console log statements?
Portland OR. Whoops on #1. On #2, I'm not sure what you are asking, yes, you can use console.log's in Quokka.
Clear explanation, now I get it, thank you.
This is GOLD !
Thank you.
Thank you for the masterclass on these topics
Great great video!! U explained the useMemo so well !!!
Couple of questions,
1. when you test JS code what exstention do you use to run the code straight away and display in editor?
2. what do you use to autocomplete code for you?
I often use WallabyJS, and for auto completion I use GitHub Copilot.
best video on this subject thanks for helping me understand this better
Probably the best explanation on this topic.
Wish this video was created a long time ago! Would have sped up my understanding 10x
Extremely good explanations, thank you!
Jack you are an amazing teacher! Thank you for this video!
Amazing video jack ... That comparison with loadash is great one to remember react.memo forever 🤘, just surprised that the button clicked times is not updating 🤔 is always 0 (oh my bad !! It's on color click 🤣)
awsome and comprehensive explanation thanks a lot
Thank you, your explanation way is so amazing and I learned a lot and how you use examples is great.
Thanks mate, perfect explanation!
Thanks Jack, for the awesome video
Thank you so much, Mr. Herrington. It is really informative and well explained.
It's Herrington. :) And, thank you.
@@jherr Sorry, my bad. I corrected it.
Great content. You're a wonderful teacher. Keep up the good work, Sir.
Thanks.
it's really too much to digest.
from-now I am your content follower.
thank you sir for your intelligence and your pedagogy. very well explained. god bless u
thank you for getting me to look up pedagogy. :)
Hey, thank you for this awesome video! Really good explanation :)
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!)
best explanation with example. Thankyou
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.
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.
Thank you, Jack.
I learned a lot 😊
This channel is a treasure!
@26:36 my face when he slid across the room revealing that the background is a green screen :o :o :o
Thats the most impressive green screen I have seen on youtube, it looks so realistic! Also, the transition between your hair and the background is pretty much not noticable. Much impress.
Hey Jack! I really appreciate the deep dives. Thank you!
Perfect video. So helpful. Btw.. which extension do you use for code completion ?
Github Copilot