ReactJS Tutorial - 27 - memo

📱 Follow Codevolution

[vigneshpugaz]

To all those having confusion between PureComponent and Memo->>>> PureComponent is used to memoize only class based components and does a shallow comparison of both state and props.Memo on the other hand shallow compares only the props.

[prisinha]

0:30 PureComponent is for class based component and Memo is for functional component

[dedee]

Thanks you Sir. I am learning React Js with you. 🤩

[trivikramtechnologies]

Hi. The videos are very impressive. I have even followed your Angular tutorial and I am learning React here. I expect some videos on React with Redux. These videos are very clean to understand. Thank you!

[den_]

You may find your self in a situation when you don't want to export MemoComp as a default (because for e.g.: you have your ParentComp in the same file) then you can export it like this:


export function MemoComp({name}) {
console.log('Rendering Memo component')
return (
<div>{name}</div>)

}

MemoComp = React.memo( MemoComp )


// So you can export anything else
export default ParentComp

[JohnDoe-tovr]

Your explanations are indeed very clear and understandable. However, given that the playlist is now 5 years old, it would be greatly appreciated if you could create a new React course. Thank you!

[vigneshgvs]

PureComponent - for class components
React.memo - for functional components

[siminsalimi]

You definitely should have over million subscribe 👌 The best React tutorial In the 🌎👏👏👏👏👏👏👏👏👏👏👏👏

[seemashirur]

This Series is really Great. It would be awesome if you provide the notes for the same. It would be easy to recall. otherwise if we need to come back o videos if we forget anything which is actually time consuming. At least the theory part notes will be fine.

[tejaulisetti]

Really Thank You. These videos Were helping us a lot

[Himanshumeenamnnit]

to check if this stop rerendering you can use useEffect hook(see react hooks series) like this:

import React from "react";
function ReactMemo(props) {
React.useEffect(() => {

}, [props]);

console.log(props);
return <div>ReactMemo</div>;
}
export default React.memo(ReactMemo);

[amitavamozumder]

do we need this?? we can just add the props in the dependency list of useEffects function, that works fine !

[praveenpoonja]

I have a doubt. Why do console.log execute twice when I call a component once?

[vivekaggarwal]

Can we pass a class component in Memo like this "React.memo(ClassComponent)" ??

[jessica-tvep]

Tbh, I still don't know the use of pure component and memo. I mean I don't know in what case we should use these methods. I understand that we use pure components for class components and memo for functional components, but in real cases/projects, I still don't get it. It's getting harder :(

[otisex]

what is differents React.memo vs PureComponent? Same feature?

[logs]

So what should I use? Memo or Purecomponent?

[sarekaavinash]

When i execcute console.log() in the components, the statements are executed twice

[rleyvenmagboo]

how's the behavior of React.memo now? In my case the parent is rendered only once.

[vinayaks.b.]

How to use react.memo in named export ?