ReactJS Tutorial - 26 - Pure Components

Рет қаралды 348,507

Күн бұрын

📘 Courses - learn.codevolution.dev/
💖 Support UPI - support.codevolution.dev/
💖 Support PayPal - www.paypal.me/Codevolution
💾 Github - github.com/gopinav
📱 Follow Codevolution
+ Twitter - / codevolutionweb
+ Facebook - / codevolutionweb
📫 Business - codevolution.business@gmail.com
In React, we can create a component by extending the PureComponent class. A Pure Component implements the shouldComponentUpdate lifecycle method by performing a shallow comparison on the props and state
of the component. If there is no difference, the component is not re-rendered thereby providing a performance boost.

Пікірлер: 157

@kimbanzip 3 жыл бұрын

The explanations are super clear and detailed. I can't believe it's free. You're doing God's work bro.

@subhranil764 2 жыл бұрын

True:). This man deserve respect, kudos!

@shineLouisShine Жыл бұрын

A very good Karma, no doubt..

@estengrove3350 5 жыл бұрын

Very detailed explanation. Well done, man! You cover so many of the lesser covered topics that are integral in understanding what's happening "Under-the-hood". Much appreciated

@harshjaiswal3947 4 жыл бұрын

Finally someone explained what shallow comparison is and when to use Pure Components. Thanks a lot !!

@itgiants5218 2 жыл бұрын

Just WooW, the amount of information I have learned is tremendous, you're really a good teacher I like the way you explain the lessons with, please keep it up I wish I knew you a long time ago.

@donatobaonguis4315 4 жыл бұрын

Great tutorial..concise, direct to the point and very clear explanation and communication! Thank you, sir!

@vidtuber4272 6 ай бұрын

I consider myself fortunate to have stumbled upon this channel. Your crystal clear explanations are truly appreciated. Thank you very much.

@massiveblackwood 3 жыл бұрын

good series for lazy guy like me, 4th day on react and this always bring me back since you almost covered all do's and donts on every section just amazing thanks

@austinjohn8713 3 жыл бұрын

your series is much more than a tutorial. it is a lecture series that include tutorials. Your teaching style far exceed anything on KZfaq in techniqcal training. i had to come here to understand the motivation for pure components as well as what shallow comparison is

@garikmelqonyan6011 Жыл бұрын

Thanks for all these tutorials, man. You are definitely one of the bests on whole youtube.

@dheerajnagar9742 3 жыл бұрын

Usually I don't comment, but your teaching took me here... You are awesome bro, you clearly explained every single point. Thanks

@MaheshKumar-lo7hj 5 жыл бұрын

Wonderful Lectures I am seeing on react. Please Please go ahead like this.

@kiwi-Centaur 2 жыл бұрын

Hi Vishwas, I really wanna thank you for the the time you've taken create this wonderful series, this video was beautifully explained. cheers

@becauseistand 5 жыл бұрын

brilliant explanation, sir. Thank you

@ramioooz 9 ай бұрын

A very high-quality lesson. This cant be topped out. Thank you very much, Vishwas.

@CknSalad 5 жыл бұрын

these lessons have a natural progression and have just the right amount of 'repeating'. react team should hire you to do the docs lol.

@subhranil764 2 жыл бұрын

True

@__sagar_shah__591 3 жыл бұрын

You jst became my guardian angel man..... Thanks for the all hardword you out in.

@chetanchavan3466 26 күн бұрын

You are just great!!! You just explain entire react documentation. Better than documents contents...

@huanshao2165 4 жыл бұрын

Best of best reactjs tutorial on the planet!

@zoalerix 3 жыл бұрын

This guy is a beast, appreciate it this so much!

@prasadbuddhala758 2 ай бұрын

Crystal clear explanation ❤ Keep up all the good work bro

@aribkamal3239 2 жыл бұрын

This guy provides the best education for free. I would have never understood this anywhere else

@AbdelhameedG 4 жыл бұрын

Thanks Mate! best pure component explanation I've seen

@nkbanerjee2549 Жыл бұрын

Oh my god...the best of till now...i can't even imagine that it's absolutely free...kudos to you buddy 🔥

@rajnandanibhawsar3105 2 жыл бұрын

I give you like before watching your video. Because I have Vishwas that you will explain perfectly every time.💯

@adriantolero6687 2 жыл бұрын

Thank you so much for this topic. The explanations are crystal clear. I wish you were my professor when I was in college. XD

@arielspalter7425 4 жыл бұрын

Super high quality content. Thanks! Subscribed.

@parthapaul1249 3 жыл бұрын

अद्भुत वीडियो है। .धन्यवाद आचार्य 🙏

@harendrapanda7530 4 жыл бұрын

Thank you very much for sharing in-depth knowledge...

@muhammaddavatgar4973 4 жыл бұрын

most complete tutorial on youtube

@FunnyFlicks121 3 жыл бұрын

Such a best and free content Thank you Sir!

@TamNguyen-kj5yo 2 жыл бұрын

Thank you for your clearly expanations! That helps me a lot.

@gayathrithedev 3 жыл бұрын

Great explanation with easy example. Thanks a lot

@Dynamic-rn6wc 3 жыл бұрын

Sending many thanks for this awesome tutorial

@umangkumar6568 3 жыл бұрын

Very good explanation, Sir.

@talivanov93 4 жыл бұрын

Great explanation. Help me a lot!

@viktorsavchenko2061 3 жыл бұрын

Hi, thank you very much for such a detailed explanation

@aakashjadhav327 2 жыл бұрын

binge watching code evolution

@asifurrahman5436 3 жыл бұрын

In details explanation, Loved it

@matteol1778 3 жыл бұрын

Bro, you are a living legend

@hoelefouk 4 жыл бұрын

Good job vishwas!

@lathagm666 9 ай бұрын

completed video 26. Thank you 🙂

@objectObject212 5 жыл бұрын

great explanation! thx

@jagdishshetty4782 5 жыл бұрын

Great tutorial !!!

@venkatkosuri5224 3 жыл бұрын

You're videos are awesome ❤️

@barkaouimohamed 2 жыл бұрын

Very detailed explanation Thaaaaank you

@fredgarati 3 жыл бұрын

This guy is some kind of hero....

@mohdirshad7983 4 жыл бұрын

thanks Sir very neat explanation .

@regissmukubiza6350 2 жыл бұрын

This Tuto is useful. Thank you

@onf3257 10 ай бұрын

Amazing teacher

@Aditya.Santra 2 жыл бұрын

Very Helpful Video

@venkatkosuri5224 3 жыл бұрын

Thank you Vishwas ❤️

@ashwinig8217 2 жыл бұрын

very clear explanation. thank you so much for that. i have a doubt that even it support performance boost, why cant we use pure components only instead of components

@ivan-the-l 4 жыл бұрын

Nice explanation!

@fitindiandev4112 3 жыл бұрын

Great work bro

@berkgaffaroglu8614 4 жыл бұрын

That was epic!

@dilpreetkaur2862 4 жыл бұрын

At 10:20, why don't we see re render in parent component? Its clearly see that prevState is not equal to this.state because both points to different reference. We are not comparing values for objects as per shallow comparison? Please explain.

@shineLouisShine Жыл бұрын

Thank you, champ.

@user-mo3cw6go7c 3 жыл бұрын

Very very good and fun 👍👍👍

@kirankamath5891 3 жыл бұрын

I got now what exactly is pure and how it improves performance , one question i have in mind , if i add shouldcomponentupdate to regular component , will it be converted to PureComponent?

@jsampat761 5 жыл бұрын

Great information

@anandagar2k 2 жыл бұрын

I am confused on setState react will call the render method only if it has any change in the state but here it keeps set the name as vishwas then how it call render method again and again please clarify

@lolasdasad 3 жыл бұрын

Really thx man!!!!

@harmanpreetbhatti4354 4 жыл бұрын

Thank you for such wonderful content. Here, in Regular Component, if we write a shouldComponentupdate method with shallow comparison of props/state, would that make it equivalent to Pure Component?

@subhranil764 2 жыл бұрын

yeah i think so. But why should you put so much effort if it can be done easily with pure component, lol.

@calvinalfredo2124 Жыл бұрын

is there any reason to get rid of the named exports and instead use the default exports when dealing with class component?

@rohitchaudhari3343 4 жыл бұрын

Really very nice

@lichaytiram9246 4 жыл бұрын

hi sir , 7:34 have a little mistake - shallow comparison return false while a and b are strictly equal.

@paramvirsingh5638 4 жыл бұрын

He is talking about exact reference in Complex types. With that he is correct

@adelprog 3 жыл бұрын

you are the best

@navyaenneti877 4 жыл бұрын

nice explanation...

@SIDDHARTH8925 3 жыл бұрын

In some tutorial they save the component as .jsx extension as we save it as .js why ?? does this cause any change ??

@ahsanulkabir8640 Жыл бұрын

Just WOOOOOOWWWW!!!

@Nikhilsharma-dp9tw 3 жыл бұрын

Works like purepipes in angular. 😀

@abhishekjain6234 4 жыл бұрын

Where can we find the slides????

@TheDivyansh007 3 жыл бұрын

So it is better to use pure components always than regular one?

@arunlabana5937 3 жыл бұрын

Hello sir. Sir in pure and regular component you have not accessed props like previous videos. In previous videos you used render(props){ Bla bla... } But here you used render(){ Bla bla... }. So, is it correct syntax you used in this video?

@asashish905 4 жыл бұрын

Well, I did not get the last part. :-( Is it like, we should not make changes in the state by changing /adding/ removing the data in the state object? instead, we should return a brand new object and as a new state? Please, anyone!

@shaheerzaman620 4 жыл бұрын

Basically create a new array with the elements instead of pushing the element in the original array. If you mutate the original array, in pure components re-rendering will not take place.

@freshenup6195 4 жыл бұрын

In pure comonents when rerendering, it will not check if the values in for example your array have changed. It will check if the object refrence is still the same. If it is it wont rerender. But it your create and populate a new object with your values. It will change and rerender the component

@venkatkosuri5224 3 жыл бұрын

Keep sharing

@zoranristevski4553 Жыл бұрын

In the console I get double actions, instead of one.

@user-wo4cq4zh3n 3 жыл бұрын

could u please remind me why u always delete the 'export'?

@ManishSingh-lk4qs 5 жыл бұрын

Perfect..

@yashraj6565 2 жыл бұрын

My pureComp also rendering. Wht should i do?

@raghavakg1052 3 жыл бұрын

In console ,im getting all the three components : parent ,regular nd pure components ....can anyone help me out??

@amanali9501 3 жыл бұрын

Which extension of vscode you are using 🙏🙏

@vishalbhardwaj8577 2 жыл бұрын

Awesome

@icebare139 3 жыл бұрын

Is there has pure component in functional component?

@subhajitpanja1353 5 жыл бұрын

super one

@freshcodes Жыл бұрын

i didn;t understand shallow comparison, we are not say that `setState` return new state? hence new reference even if properties is the same, then Pure Component should re-render when we calling setState whenever.

@prisinha 2 жыл бұрын

5:30 console.log output shows that pure component output appears only once

@shubhamhirap3305 4 жыл бұрын

I got error with this code. can you help me?

@ramammurshal3139 2 жыл бұрын

GG explanation

@abhinaytiwari8033 5 жыл бұрын

awesome

@orrerr851 2 жыл бұрын

love

@vineetjha6480 3 жыл бұрын

why am i getting two times execution of console.log after each render?

@dungvu8790 3 жыл бұрын

Remove from index.js :D

@vigneshgvs 2 жыл бұрын

PureComponent - renders only if there is a Shallow change b/w values Regular component - always renders. 1. Shallow comparison : primitive - just value; complex - references. 2. if parent has pureComponent - then child also will not rerender.......

@elhousseyn_arab 4 жыл бұрын

sir on 7:41 String isn't a primitive type is an object

@tejeshwarshivanandan4966 4 жыл бұрын

Console.log is getting executed twice where as console.log in purecomponent is not getting executed even once can anyone help me with this issue?

@mrhimal 4 жыл бұрын

Remove from index.js

@adhupraba 4 жыл бұрын

@@mrhimal even now pure component is not getting printed... Only regular component is printed

@sukantarora1039 3 жыл бұрын

same problem , you found the solution ?

@kumimochi 3 жыл бұрын

Question, why do you always remove the export in the export class, is it always necessary?

@varadsadre2939 3 жыл бұрын

we have already a statment at the bottom which sufficient

@asifnasim1209 3 жыл бұрын

@@varadsadre2939 Also by using named export, we cannot import custom name as per our choice If we want.

@sargun_narula 3 жыл бұрын

Reason : "export" keyword is for Named Export 1. In case of Named Export we have to import the component in App.js file with *same name* and with *curly braces* Ex - import { Message } from './components/c1' 2. One can use *Multiple* Named Export per component file Ex - import { Message , Message2} from './components/c1' but he made the code snippets simple so used default exports.