React Pure Components Tutorial

[@gabrielfono844]

this is a channel that contributed to help me get my first job as full stack engineer at Booz Allen Hamilton. I learnt everything from BASIC to OOP to React class and end up with React functional. I am currently preparing my interview at Deloitte for a react position and I haven't used class for almost 2years. so I gotta get back to my dad here to rewatch and implementing things again. the difference now is that I have experience and I can review things faster. thanks again love from seattle waghinston.

[@manandabiradar2108]

After watching your video got cleared many doubts sir, thank you so much, keep it up sir

[@Techsithtube]

All the best

[@shivanigaddagimath6105]

Hi Mananda! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@anupsingh24]

lovely explaination

[@Techsithtube]

Thanks for watching Anup:)

[@shivanigaddagimath6105]

Hi Anup! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@prabeen90]

can you please make some videos on authentication and route guard with react-router.

[@roshnikutty4252]

@techsith, I too vote for these 2 topics

[@soultouchingsongs]

Me too

[@ericzorn3735]

Me 3

[@BELSISY]

Me too

[@piyushdayani4438]

Awesome Teaching Style, Thank You So much Sir

[@shivanigaddagimath6105]

Hi Piyush! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@mooresoption8224]

This is exactly what I'm looking for, very simple explanation. I was able to follow a tutorial from a different channel until everything gets tangled up. Thanks!

[@DCodingStudio]

Please watch this one as well kzbin.info/www/bejne/aILVq4Gkqt6Dd68 And please share your valuable feedback 🙏

[@aiwithrudiyt]

good explanation, would be great to see like 2 common examples for when you would likely use this

[@MasPensador]

very good, the best explanation til now, very clear and easy to understand

[@HD-fs1qm]

at 8:00 i think we can simplify it by *return this.state !== nextState* Awesome tuts BTW, very helpful

[@Techsithtube]

Thanks , that is better.

[@thehaystacker7965]

but, as both are objects, the actual comparison is not possible. Right?

[@ravikumarsudaram1344]

Really help in great understanding

[@shivanigaddagimath6105]

Hi Ravikumar! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@shasankpandey6995]

hi sir,,,i do have a qsn...can we do this.setstate() in render methode...what happen if we do that ?

[@Techsithtube]

No you don't want to do set state in render. or you will go in infinite loop.

[@shivanigaddagimath6105]

Hi Shashank! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@ajoypatra882]

Sir... It it possible to use a react components into multiple different react projects using some import ?

[@Techsithtube]

Yes, definitely. what you have to do is create a separate repo for all the reusable components. and you can npm install that in any project and use it.

[@shivanigaddagimath6105]

Hi Ajoy! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@tomlemanh5506]

Bruh... u da real MVP... so much learnt from you.

[@Techsithtube]

I am glad you learnt something. Keep learning !

[@10sreetama]

So can we subtitute Pure Compment with ComponentShouldMount ???

[@Techsithtube]

Not completely. ComponentShouldMount can be used to avoid for some manual updates. But in most cases Pure Component would be sufficient

[@shivanigaddagimath6105]

Hi Sreetama! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@10sreetama]

@@Techsithtube thank you so much

[@shakeelkoper7068]

I have completed the Entire React Series it was Great you made by day Thanx

[@Techsithtube]

Wow. That is dedication. I will have to make more now. :) Keep learning!

[@gabrielfono844]

thanks very very much again I was watching this vidoe this morning and I was like "this dude shoud be getting pay for this such amazing tutorials"

[@tkssharma]

kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@harikotha7]

Thanks, Football example is a good one :)

[@shivanigaddagimath6105]

Hi Hari ! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@sushantkshirsagar]

Your videos are addictive. Do you have routing in react video ?

[@Techsithtube]

I dont have a routing video on react. but I am planning to make some this weekend.

[@sushantkshirsagar]

techsith yeah ... I need it 😂👍🏼🙏🏼

[@tkssharma]

kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@shivanigaddagimath6105]

Hi Sushant! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@niteshtak8484]

Kindly create video related to Seever side rendering and client side rendering working with react

[@Techsithtube]

Nitesh, that is next on my plan.

[@shivanigaddagimath6105]

Hi Nitesh! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@roshnikutty4252]

Thank you, @techsith for this video!

[@manandabiradar2108]

Very nice explanation sir

[@Techsithtube]

Thanks and welcome

[@sanjaysalins]

simple and clear, very helpful, thank you

[@shivanigaddagimath6105]

Hi Sanjay! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@NitinSharma-rg8lk]

Btw why we should avoid unnecessary rerendering?? Does it affects performance?

[@VladTrishch]

Rendering is one of the most CPU-wise expensive things an app can do. If you do web development accessing DOM elements is generally slow or if you work with react-native, sometimes multiple unnecessary re-renders can take more than 1/60 of a second causing your FPS to drop below 60.

[@shivanigaddagimath6105]

Hi Nitin! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@sujaym6850]

As per your previous video in the playlist you said componentDidMount() method will only run once and it is absolutely true from what I noticed. In this video, you introduce a setInterval method inside componentDidMount() which runs every 2 seconds but I noticed it doesn't run as componentDidMount() will run only once. How did the interval work for you and not on my side? The bigger question how did componentDidMount() run multiple times?

[@shivanigaddagimath6105]

Hi Sujay! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@Colstonewall]

Awesome. . .Clear as clean glass.

[@vijukgl]

@ techsith: Hi, I have an issue creating a re usable react component with redux, that I'm added same component multiple times on the parent component and I'm trying to re load data on a button click of one of its instance but I'm ending up with rendering all components with new data re loaded any suggestions on this

[@shivanigaddagimath6105]

Hi Vijay! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@atmospheric_b]

Super clear! Thanks a lot!

[@manojd929]

what is the best pratice to make api calls in React ? in ComponentWillMount or ComponentDidMount ? When we are also using Redux in the Project

[@Techsithtube]

in ComponentDidMount. When your project grows more than some level you need to use redux. becase its hard to keep the state info in a large project.

[@shivanigaddagimath6105]

Hi Manoj! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@alexandr0id]

Is there a significance for using functional argument (updater version) with setState() at 5:40? Was it required? I don't understand the explanation at 11:35 about shallow comparison - since we create a new object in our setState() call, the reference is being changed - so why pure component skips updating in this case? Is it because the constant object we pass has the same reference between calls?

[@kartiksagar007]

Please share video playlist using React Functional Component + Redux.

[@shivanigaddagimath6105]

Hi Kartik! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@kartiksagar007]

@@shivanigaddagimath6105 company name and client budget?

[@kartiksagar007]

@@shivanigaddagimath6105 plz share the JD to [e-mail]

[@shivanigaddagimath6105]

@@kartiksagar007 will share the JD tomorrow Kartik! Thanks for the response!

[@shivanigaddagimath6105]

@@kartiksagar007 will mail all the details to your mail ID.

[@gnasamx]

make more videos with this same detailed explanation 👍

[@Techsithtube]

Just released a video on react-router. Please check it out. Thanks for watching!

[@shivanigaddagimath6105]

Hi Ganesh! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@erlanerlan7739]

where were you???? Im trying to learn this react month.... you are great man..

[@Techsithtube]

I am glad that you found the tutorials helpful. Thanks for watching !

[@erlanerlan7739]

@@Techsithtube I wanted to tell you one idea. at the end of the course about node.js you can make node.js + react.js short course. that would be greate)

[@utkarshgupta1379]

Great tutorials. Please make detailed explaination tutorials on some important topics of react

[@Techsithtube]

Yes Utkarsh i do have an entire series on react , please check it out.

[@shivanigaddagimath6105]

Hi Utkarsh! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@tambolaking5383]

You applied the wrong check in shouldcomponentmount method. A shallow comparison is required which is extensible. For that it needs to be converted to array and then foreach to be applied to compare.

[@apolodu7852]

Simple and clear, but I doubt if shalllowCompare compares reference, because it's said in React Docs: "It does this by iterating on the keys of the objects being compared and returning true when the values of a key in each object are not strictly equal."

[@gabrielfono844]

sir thanks for everything

[@sabis.9757]

Hi, I was wondering why do we want to NOT do the re-rendering in the first place? In the end, it doesn't change anything in the UI. So, what is the advantage of avoiding redundant rerendering? :)

[@Techsithtube]

any redundant re-rendering slows things down. That is the power of react.

[@indowestlife]

Can we have a super advanced video on react redux saga and react hooks? Also, the new features in every release would be awesome.

[@shivanigaddagimath6105]

Hi Aakash! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@iamsmitthakkar]

Thanks man! Great Tutorial ! Just one suggestion. I searched a lot for React Testing Tutorials but its very hard to find one. If you can make one with Jest and Enzyme that would be great.

[@tkssharma]

here is one kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@shivanigaddagimath6105]

Hi Smit! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@ginzburgi.9251]

So the state diffing for the PureComponent is an out-of-the-box functionality. Cool, but how is it accomplished? I'm kind of missing the explanation as to why it behaves like it does and why this behavior is considered pure.

[@Techsithtube]

Internally it uses memoization

[@ruchirai5775]

@techsith - nice tutorial !

[@shivanigaddagimath6105]

Hi Ruchi Rai! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@cyrusbesabella5938]

thank you sir!

[@tonydanza4502]

Most state variables are not so simple, what happens when we’re working with a combination of setIntervals and state variables like objects or arrays of objects that are not equivalent according to the shallow comparison?

[@kevinhe7]

Very good video. But I have one question about the specifics: so in the case of PureComponent, does React do shallow comparison on the state object OR all the attributes (as values/objects etc) of the state of the component? I suppose it's the latter since as we see in the example with Component, the state objects are different. Am I right?

[@Techsithtube]

Its actually doing shallow comparison of the state of the object its updating.

[@kevinhe7]

So shallow comparison means it will iterate through the attributes of those two objects and does comparisons. I see. Thank you.

[@Techsithtube]

A shallow equality check means that JS only checks that the value’s object ids (as in, the memory address for where JS stores the information for that particular object) are the same, not that their content is the same.

[@Techsithtube]

React uses a shallow equality check because it is is way more performant than doing a deep equal. In fact, React doesn’t even offer doing a deep equality check. You can do a shallow check (with PureComponent), write your own check (with shouldComponentUpdate), or not check at all and just always re-render (the default). It’s too risky for React to do a deep equality check since you might have really deeply nested data. Instead React errs on the side of not checking and doing the re-render automatically. All if this is generally good news if your component is working with shallow-equality-friendly data. If the state and prop value ids change when their content changes then the components re-render when the should - yay! However, if you don’t handle your data properly, then you can accidentally not re-render when you should

[@SubhashKumar-hx6ww]

Good Tutorial !

[@shivanigaddagimath6105]

Hi Subhash! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@bhad7787]

Correct me if I am wrong but shouldn't the child component be the one extending PureComponent? Now if the Temp component is reused elsewhere you will have to have to make its parent extend PureComponent again or make its parent use shouldComponentUpdate with more boilerplate code.

[@angshuman_halder]

I believe PureComponent will give you the full control over the component itself. So if there is a change in the state or props you have to implement shouldComponentUpdate on the other hand in normal component you don't have to override shouldComponentUpdate because react does it for you. So in a way if you want to have a deep comparison of the states you have to override the shouldComponentUpdate in a PureComponent. Am I right?

[@bbbiii2341]

Great Tutorials

[@ИльяВеличко-ц5у]

Great, like always!

[@DCodingStudio]

Please watch this one as well kzbin.info/www/bejne/aILVq4Gkqt6Dd68 And please share your valuable feedback 🙏

[@richardmccormack2486]

Great job here! :)

[@Techsithtube]

Thanks for watching Richard!

[@gabrielfono844]

thanks so much

[@rushivani454]

Is class component and pure component are same? Pls explain and give instance how class component and pure component and functional component are different. And their functionality

[@Techsithtube]

Pure components are also class components but not every class components is a pure component.

[@SunilKumar-fh6jk]

Sir please make a tutorial series on Redux for recact please.

[@tkssharma]

kzbin.info/www/bejne/kIjUl3R6mJJjgZo

[@shivanigaddagimath6105]

Hi Sunil! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@shrijantripathi]

Suscribed 😊

[@Techsithtube]

Thanks for subscribing.

[@shivanigaddagimath6105]

Hi Shrijan! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@shrijantripathi]

@@shivanigaddagimath6105 get connected on Twitter @itsmeshrijan

[@shivanigaddagimath6105]

@@shrijantripathi Thanks Shrijan! Will do!

[@vallishaik1370]

thankyou

[@sunilkumar-zf4dx]

Can please make a video on typescript react

[@Techsithtube]

Sure I will create that.

[@ruchirai5775]

@techsith - I have question for you :).I have learnt lot of stuff online first time.You also have learnt these stuff from scratch.How are you able to learn it in such a simplistic way and conceptual way ? I don't think so react official documentation explains you all these things. Untill somebody explains you or you find nice blogs it seems to be impossible to learn in this manner.

[@Techsithtube]

I look at lots of documentations and then create an example, then keep simplifying it till i cant simplify it any more. that is the trick. :)

[@matadev279]

Hello, how are you? I have a youtube channel with a native react course, I would like to redirect them to your channel so that people who see me can have more react fundamentals.

[@alishagupta1157]

hi, thanks for tutorial. Pl. give share tutorial on redux and reflection in javascript.

[@shivanigaddagimath6105]

Hi Alisha! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@syedkashifnaqvi1268]

tell us about Reactjs hooks

[@DCodingStudio]

Please watch this one as well kzbin.info/www/bejne/aILVq4Gkqt6Dd68 And please share your valuable feedback 🙏

[@ehayrapetyan1082]

thank u teacher;)

[@orangecoolius]

oooooo daddy threw a joke in, hey hey!

[@Techsithtube]

Dat funny comment :) Me like.

[@handsome_man69]

you deserve an Academy Award for best tutorialer of the year

[@Techsithtube]

Felix, thank you for being an awesome fan. Keep learning!

[@unmesh002]

Please upload series on VueJS

[@jacko0000]

Great video.. you got subscribe from me

[@dhananjaymenon3601]

Please create a comprehensive udemy course, I will gladly pay for it.

[@Techsithtube]

Next week I am releasing the react udemy course. I will have an announcement.

[@shivanigaddagimath6105]

Hi Dhananjay! Are you looking out for job opportunities in web development currently? We are a web development company and looking to hire! Let me know if interested!

[@dhananjaymenon3601]

@@shivanigaddagimath6105 Is this a new recruitment strategy? lol unbelievable

[@shivanigaddagimath6105]

@@dhananjaymenon3601 Haha! Yes, you could say that! We figure we will find the right talent at their learning spots! Thanks for your response!

[@dhananjaymenon3601]

@@shivanigaddagimath6105 Interesting strategy! but thanks, not looking for a job right now. Will reply if i am in the future.

[@JD-yz8cn]

I feel like you should've used the `PureComponent` with the same `Math.random()` to see what happens in that scenario.

[@Techsithtube]

yes i agree, Please also check out react.memo which is a similar feature for functional component. I have a tutorial on that.

[@abdulrehmankaimkhani9892]

nice (Y)

[@joshk2181]

thank you, 6 disappointing articles and 4 disappointing videos later you've actually explained it by the 4:00 mark

[@joshk2181]

gets a sub from me

[@Techsithtube]

Thanks for watching Josh! :)

[@thehaystacker7965]

just curious to know, what are those disappointing articles and videos?

[@muhammadbilal-ur-rehman6809]

You should update your videos according to the new standards of react.

[@Techsithtube]

there is on option for updating. I already have new updated videos on react, newer videos are updated with hooks.

[@ckvinothkumar]

Please provide some valid examples to avoid pure components .

[@Techsithtube]

The most practical use is where you have frequent new data , and you need to make a decision to update or not update the state, which ultimately is a cost of updating DOM. pure component makes that decision for you in some of those cases and save you some DOM updates. Auto refresh feature on your cricket scope page is a perfect example.

[@Techsithtube]

Avoid pure components where your state is deeply nested since pure component does only shallow compare.

[@tushar4283]

Please make short videos........

[@naveenpujari8996]

though i like urs videos. but why u do so many cuts in video similar to pak army videos... they make 1000 cuts in single video... lol

[@a.skatariya6337]

Pahle to ye fake accent band kro..insaan ki tarah mix bread mat bano