Mastering React Memo

👉 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

[onebronx]

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.

[alexanderkuznetsov]

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".

[sideshowlol]

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. 🙏😎

[vladandreit]

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.

[dastansito]

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!

[arsalanhussain]

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🙂

[rism]

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.

[topsoilgargoyle]

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.

[swapnilsingh]

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.

[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!!!!

[vitorwindberg]

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!

[vigyanhoon]

I love the way you jump to code instead of wasting time on talking like others. Keep it up!

[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!

[mohsinwaseem]

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

[geralt]

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!

[utkarshsrivastava]

You can tell right away by his thinking out loud, that he is a senior developer xD. Thank you for your amazing content :)

[leszekmodrzejewski]

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 👏👏👏

[nicholasfane]

These videos are gold Jack, it's hard to find such high quality and down to earth tutorials like these. Keep it up!

[Gringo]

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!

[mirajaryal]

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.