How to use memo in React to Optimize Renders

[@gonzalochristobal]

awesome video ben! i'll be glad to see more videos on optimization and more advanced react concepts like this!

[@PJArmy]

Great video! I was looking for complex situations and real life example and this was the only video that got close to it!

[@viet.khoaiegg]

This video is actually the best on KZbin about how to use memo and even useCallback

[@aleksandarbisevac3129]

Wow, great example. In 10 minutes, this is the best explanation of memoisation and optimization of the react functional component. I have much better picture of useCallback and useMemo, also how to avoid writing callbacks inside React.memo. KUDOS to you Sir.

[@gadayash9]

Not easy to find beginner to moderate-ish vids on such topics. Might have to go through this a thousand times over a few months, but thanks man

[@schnubor]

Nice! Would love to see a follow video though: "Why not use memo for all react components" ?

[@marcel5235]

the number of bugs you will create with this approach or time spent to actually make it work as intended + keep the app fast is something that makes you think twice about that

[@maximiliaanvandijk6111]

@@marcel5235 Solution.. stop using react

[@codelightsparkles2403]

@@maximiliaanvandijk6111 Why ? React is the king of jobs right now, other frameworks are lucky to have 50% of jobs react has. If it was me , I would have a look at Svelte for my own projects but if you meed a job then there is nothing better than react

[@maximiliaanvandijk6111]

@@codelightsparkles2403 Then why are you using memo. Don't think I've seen the need for that in other frameworks. Quite sure jQuery had a high job availability as well ;)

[@vkj3131]

@@marcel5235 to

[@jayaprakashreddy560]

Awesome!! straight to the point. liked the point that how to handle the ref change of non-simple types (objects, functions) ..

[@firstnamelastname4685]

in 6:17 When App render , The ref to settext did change right？ then how line 10 works

[@PAD637]

@9:29 couldn't you also use useRef for that data object which would also prevent re-creating of the object right?

[@vibekdutta6539]

Ben awesome video, I had a small doubt, when u clik the increment button the Count component re-renders the state changes, but after u have wrapped the onOdd() with useCallback(), everytime you type the setText changes and it should also change the onOdd() isnt it?

[@maxaquilino7264]

Hey Ben good work on this as usual. It'd be great to create a video on how to optimize performance when using Flatlist applying Memo and Callback. This video explains clearly how to prevent re-rendering on functions, what about other types of components like classes. Cheers!

[@EagerEggplant]

Arent classes just objects in JS?

[@mr-skorpion]

Awesome vid as always Ben and thanks for flexing those vim skills 😂

[@malikbrahimi7504]

Why was your dependency setText for the callback? Couldn't you have left it empty? Also can you do a tutorial on using the profiler to detect optimization issues?

[@scottmai7457]

Amazingly clear and concise - thanks Ben!

[@MohiyuddinShaikh]

Wonderful video!

[@EVA_Hamza]

Amazing, we need more videos like this

[@avisterdeveloper1120]

Thanks crack! the only video I got that concept

[@WanderlustThamur]

dude so simple and yet so clean, thank you very much!!!

[@westernpigeon]

5:35 what is a lambda? tried googling but all i get is AWS Lambda and im sure they're not related

[@cutipets8706]

so basically useMemo used to memorize objects and useCallBack with functions? is i'm right?

[@ngocdangduc3772]

I got question, Why this is not implemented by default in react ?

[@chethanprabhu4475]

Please someone help me. What if the parent was class based component? How can we make sure child does not rerender when we pass an function as prop to child.?

[@metin4yt]

What if I have some data that's coming from a Context. That context gets updated via a WebSocket. This causes me a render on which notification. Which I guess it's fine. But I have an for each item in data, and I would like to re-render only the new items, not the old ones aswell. How can that be managed?

[@rubenmartinez2807]

With a memoized list item component

[@md.siddiq7165]

This is literally an awesome content on performance optimization in react. Thanks Ben ❤️❤️

[@farizma]

Bro this is amazing, I've been struggling to understand where to use memo actually. U made it so clear ❤️❤️

[@alimirazimzadeh544]

best explanation ever in 3 minutes

[@darryl_young]

Thanks for sharing, Ben.

[@diegounanue]

I know that child components are updated when parent is updated. But if you don't have the ref that you use in the child component, when react compares the virtual dom with the dom, what part will be uptaded in the child component? If the virtual dom of the child is the same as the dom.

[@arwysyah2400]

How to avoiding multiple rander if i am using flatlist in parents and passing props to Child component , while i am fetch data and assign to state,and pss props to child, it’s showing multiple rander in number of props that i passed,how to avoid that ?

[@rorycawley]

Excellent video, brilliantly explained. Thanks for going to that trouble.

[@carlosbenavides670]

Really nice explanation. Thanks for sharing.

[@surajitdas94]

Great one! Really appreciate your effort. Thanks a lot.

[@mohammedg485]

thank you so much بن عوض

[@abhaykumar9806]

Please tell me how can I optimize redux action/state mapped as props in react components???

[@marcel5235]

Using reselect library which memoizes created selector. That prevents to redundant render. Actions should be triggered once in ui and ideally have controll component and dumb component, ie if u have actions that fires in useEffect have them grouped

[@elie2222]

What are the best tools you’ve seen to check for components rendering too much when you do run into performance issues?

[@bawad]

the react profiler is pretty nice

[@patrickren7395]

Can I thonk of useCallback as a special version of useMemo?

[@starsky411]

There is a small mistake, at 7:45, the component will NOT re-render if you return TRUE. its the opposite actually, it will re-render if you return FALSE.

[@tonydanza4502]

is React.useCallback() necessary for all callbacks where you are trying to avoid unneccessary rerenders of a memo-ized component? Wonder if you set onOdd equal to a plain old function expression like const onOdd = () => {setText(' ') } and ? I'm wondering why useCallback was only introduced with hooks and not before, was this optimization not available pre-hooks?

[@bawad]

const onOdd = () => {setText(' ') } still creates a function each time in classes you could create methods that weren't created on each render class MyComponent { onOdd = () => {} render() { return ( ) } }

[@tonydanza4502]

Ben Awad gotcha, thanks so much!

[@nicofraisse8380]

What color scheme are you using? Looks really nice

[@benjaminhobson2085]

Brilliant man. Thanks.

[@hanggianggono3765]

Thank you BEN AWAD

[@Mr.QLead1417]

react says that if you have "expensive component" or "massive rerenders in a second" then you should use "memo". If there isnt any lag or smth, they say it is OK. So, because of the old PureComponent approach, everybody puts memo to every functional component. Because they didnt want to rerender the functional component. But, if the component arent expensive and it is not rerendering simultaneously (for example onResize or coordinates changing events), then shouldn't we just leave the component without memo? There are a lot of discussion about this topic, and such this videos, new react developers may get confused or make misusages about memo. What do you think about ? I think a more important topic is deciding whether a component is expensive or not. When to use "memo" and do we need performance optimization here or not ?

[@GoeHybrid]

This is awesome! Thank you!

[@23sagunjaiswal23]

best video found after 2 days of trying to understand this

[@jordiyaputra8359]

You saved my code, thank you

[@jooooo9572]

thank you for great content

[@tonydanza4502]

is there a good strategy for memoizing a component that is passed a prop that is a complex object, like an array of objects that you'd get back from an API?

[@bawad]

Does the complex object change often?

[@tonydanza4502]

Ben Awad no

[@bawad]

then the reference to the object should stay the same and memoizing should work

[@tonydanza4502]

@@bawad sorry I mispoke what was actually happening, though physically they look the same, the objects are definitely different. What I am doing is setting an interval every 10 seconds to get information back from an api and then rehydrating the state with what I get back. Is there a technique for reducing rerenders when a shallow comparison is not enough?

[@tonydanza4502]

I guess I could handle this situation another way, when i setState every time that interval is executed I could check to see if the objects have changed, otherwise don't set state. I wonder if that's best practice?

[@AnNguyen-uv9yc]

amazing bro

[@alanson76]

Awesome, Thanks a lot!!!

[@huynhut5395]

I tried with string, number, boolean, array, object, function and result was: not-rerender: string, number, boolean rerender: array, object, function And i used useMemo with Array similar to Object but it's re-render? Can you help me!

[@bawad]

the reference to the array, object, function is changing each render then

[@naseer036]

Very good content

[@ChavitaRocha]

Hi Ben! I was curios about What keyboard do you use? :P Thanks for your videos :)

[@bawad]

das keyboard

[@abhaykumar9806]

Why is my renders.current value double the count in React.StrictMode?? Any idea....

[@chass8862]

i had the same issue

[@chass8862]

i believe strict mode is used to find side effects and in order to help you do this is invokes methods such as render twice rather than once like react would normally

[@Chocoholic1337]

Hey Ben! I've learned about a really wicked extension for VSCode - it's called IntelliCode. It adds suggested autocomplete based on "AI" (Basically they scanned a ton of repositories). So for instance: const string = "potato"; string. - will show .split, .replace, .toLowerCase. But if I do if (string.){} it will show .length, .indexOf, .,match etc. Look into it, I think it's cool!

[@bawad]

cool, I'll check it out

[@planetmall2]

Great example!

[@Daniol]

Can you say what's the name of this font?

[@bawad]

dm

[@nuiatsun]

dank.sh/

[@arturgaik4777]

thanks dude!

[@muratasarslan2359]

Wonderful !

[@deshario]

Wanna some examples with graphql useQuery[apollo-client lib]

[@hardikchawla4966]

You are the best !!

[@amershboul9107]

very useful

[@user-ke2on2ju8m]

thank u so much!

[@Givemilesrewardmiles]

can you please do a similar video but without using hooks?

[@elie2222]

Miles Rostami look at React.purecomponent, add functions to the class and not in render, and look at shouldcomponentupdate to the same sort of thing with older versions of React using classes

[@bawad]

kzbin.info/www/bejne/l6nToZ2ln9GIpNk

[@uusa35]

thank you

[@modestas2890]

Are you using vim?

[@bawad]

Yes

[@D4MJ4NTTK]

brilliant

[@budiprakosa6984]

thanks!

[@miguel900030]

You literally saved my ass

[@krillkusb5887]

helpful

[@rtorcato]

Problem really is that people build massive components that do too much. In this demo it would be way easier to just build an input component that handles it's own state on change.

[@bawad]

yes and no, sometimes you need to raise the state

[@js_programmer8423]

I am so confused, it seems like React.memo, useMemo & useCallback all do the same exact thing, fml.

[@TheSirmousavi]

Arrrgh! God, the IDE error messages !!!

[@rezan6971]

they said hooks to make it simple.. they lied