ReactJS Tutorial - 34 - Higher Order Components (Part 2)

[@GaurangRShah]

Submitting a pr for the react-docs to include the example: const IronMan = withSuit(TonyStark) --- absolute genius! 👏👏👏👏

[@Zhung36]

Do you have the link to the pr? Just curious

[@anth0ni33]

Honestly. That was an awesome explanation

[@grzegorzniedzielski6885]

One gotcha I would mention with this example is that in MCU Tony Stark can exist without his suit on his own but when you create withExtend( SomeComponent ) you cannot use SomeComponent on its own because inside it you use props that are provided by "withExtend". If you would use HoverCounter from the example 11:52 on its own it would not have count or incrementCount props and throw an error.

[@hostname47]

@@grzegorzniedzielski6885 Good point, but you need to know that the code in the HOC was already existing in the wrapped component, and because we observed that this code is duplicating, we moved that code to the HOC component, and that is why the wrapped component rely on the code in HOC. If you take a deep look at the wrapped component, you'll notice that it does not make sense to use it alone without HOC, because it needs some pieces from HOC. If you want to use WrappedComponent on its own without HOC, you need to define all the neccessary code for it to work; If you find that code duplicated between more than one component, then you need to use HOC to solve that problem

[@pranavanilkumar1246]

next level example

[@nassimhaniikene571]

Your way to teach the HOC is the best that I could find in the internet, thank you so much Vishwas !

[@soufianesammah5936]

I agree!

[@ינוןאלבז-כ1ז]

@@soufianesammah5936 i agree to

[@vishwaskhurana1217]

You are Welcome :)

[@AmanJain-dn6pu]

"Parampara, Pratishtha, Anushasan" !! Every lecture is so systematic and informative, May god bless you with good health and handsome patreon balance.

[@FIREHIVE]

Duuuude this is some next level explaining. Holy shit never have I ever understood something that at first sight was rocket sience for me so easly. Nice job my friend!

[@bernhardsmuts2265]

Best example of anything on the web every in the history of everness: const IronMan = withSuit(TonyStark)

[@pandulaweerasooriya7689]

This guy is like a React Genius!. Great work my friend

[@olgasinenkova]

I liked how the tutorial goes over the topic, then sums it up, goes over it again briefly, sums up the essence.

[@CknSalad]

this was easily the best explanation from beginning to end on HOCs, which are probably a pain point for a lot of people new to React.

[@mizanalharun57]

Today I am clear about HOC. Thanks a ton brother. Your teaching quality is awesome. Many people know but can't express. You know well also can explain well. May God bless you.

[@pradeepdabane]

Hey, Viswas you are doing exceptional work, teaching in the simplest manner is indeed a hard task.

[@vigneshthiruvirkolam2458]

The way you explain the HOC is clean and simple to understand. Thank you so much for all your videos.

[@krishnavenkata1667]

One of the best explanations I have heard on higher-order components ..Excellent Vishwas !!!

[@VigneshSharma-vrs]

Probably the best video on hoc on the internet till date.

[@AashPatel-p9u]

Thanks for this. I just watched a video where the HOC is implemented directly without the original component's commonalities being abstracted, and it made no sense. This video has cleared up that confusion.

[@madmax336]

Thank you very much! After going through many tutorials this one really explained it well and I finally figured it out. The naming convention makes it a little confusing to learn and it was much easier to learn when you went through it with the original names

[@kailashuniyal04]

You made my day. Now, I know what's happening in the 'react-dnd' library. Thanks!

[@ilhamakbar8523]

yeah.. and the connect() in redux

[@arihantjain8347]

Your voice is so soothing like Pankaj Tripathi is teaching React. The way you make things so simple, thanks a lot!!

[@manasiroy9510]

This is an amazing tutorial. Simple and Understanding. You teach like everyone can understand if they are novices also.

[@RodrigoSantos-wn4ze]

Thanks, you video was indeed great. I believe I had read about 10 times the React HOCs page about it and couldn't get it so clear as you've done.

[@apurvsawant5703]

You have the magic of explaining very difficult concept with simplicity. Hats off!

[@AnkitKumar-tp8hc]

Excellent explanation. I have seen so many videos, but your way of explaining concepts is very simple and easy to understand. Keep up the good work😊

[@extradipofhoney6189]

Every other explanation I found on the internet was really difficult to grasp (even worse with TypeScript examples). But your explanation was so easy to digest. Thank you Vishwaz!

[@kkunal45]

Most simple explanation i ever found on KZbin

[@elsombrero105]

Simple, consistent - brilliant explanation!

[@rishovbarai]

one channel which explains things in an understanding manner... thank you for providing such good content

[@tk300693]

Wow! Love the way you show the component with your own example names in the beginning as opposed to their conventional naming. I feel this makes it easier to grasp. Also major like for the Tony Stark example. Just brilliant!

[@juhandvan]

Previously, I saw some examples of HOC in KZbin but them was too complicated I think this is the most understandable guide that I've ever known

[@dinesh8112]

man, you are a genius! such a keen explanation!

[@apoorvaojha]

You are amazing! From the examples you give in the beginning to the conclusion wherein you explain everything once again, couldn't have found a better teacher than you! Thank you so much!

[@AnsaryBhai_ias_sa]

The way you give examples is just awesome !!

[@Brsrtc]

This is the far most best greatest explanation about HOC!

[@ImranKhan-tl1jq]

Best way to teach HOC... Kudos to you !!!!!

[@ManojSethi]

Best Explanation I found on youtube.

[@mayank_upadhyay_19]

I was always afraid and skeptical of HOC, just took me a second and I understood everything, thankyou very much 🙏

[@mohammadshakeri7708]

man, you are so great. It's been a long time trying to understand HOC but I got it completely in this video. ty

[@baniyaTrader]

best explanation for HOC. Searched so many videos but this one is best

[@toannew]

0:05 why need HOC? 7:05 code for HOC 7:39 code for Click Counter

[@mahaahaadi]

explained very well please make more videos like this (keeping shorter and easy to understand).

[@soumya1842]

Thanks. you have eplained properly about HOC. I did not find proper explaintion in any other youtube videos.

[@anadisharma40]

More than 3 months till today (April 23, 2019), more than 3.5k views. But 0 dislikes. There's a reason behind it. Congrats. :)

[@amirovuz]

Hi. It's the best explanation about HOC I've even seen. Thank you very much. Bro you are doing good, we all love your lessons.

[@AbhishekKumar-kd7bp]

this iron man with suit example was ek no !! Bs m4a aa gya!!

[@igorbarbosa9292]

Thank you a lot! the best explanation! i were looking for a content like this in portuguese but couldn't understand about HOC just with you i could understood! thank you more again

[@Sourabh311]

That Ironman example was lit🔥

[@mdrahiem_dev]

seriously man.. I totally agree with Nassim. You are awesome at explaining things.

[@melodyworld9340]

i have no words to thank you for made this tutorials so awesome Sir

[@longnhat6405]

Thanks you so much codeevolution! you always delivery it very clean

[@madeupstory]

Wow! That was the best explanation I came across for HOC so far. Subscribed!

[@narayanarao9554]

First i was watching content like ZERO dislikes for entire react series ... AWESOME

[@BorgMater]

My man, this was excellent :) As soon as my paycheck arrives, I will support you :D

[@shaznanfairoze2008]

Best explanation on HOC so far, good stuff!

[@user-wc1sm8cj8s]

whoah!!!!! never though this is possible with react components, amazing!!!! So it's like the concept of higher order functions in Functional Programming, and decorators

[@yakobabada1836]

Good description: HOC takes the component and returns enhanced component

[@waeljawadi5842]

Thanks alot for this video, i was searching on youtube and on google for a good explnation about 'HOC' and i got it

[@kikevanegazz325]

I ADORE your tutorials. I learn a lot.

[@albertndege5596]

The best explanation that i have ever come across about HOC thank you so much

[@traviswhittington4374]

Thanks!

[@georgidimitrov95]

Thank you, the explanation was super helpful! I couldnt wrap my head around it at first !

[@valikonen]

With this schema I will pass next interview :))

[@AjobTottho]

The way you teach is really amazing, Bro . May God bless you. I bought a long time ago Max course but I prefer learning from you instead Max.

[@dhavaljardosh]

This video was a bit slow. But I loved it that way. I felt like I was digesting every bit of info. Thank you very much.

[@3208nandu]

I must say it is excellent tutorial for HOC

[@yasharthsingh805]

You are Kaushik(Java Brains) for the front-end.👏👏👏👏

[@aashayamballi]

Wow that iron man example was great!

[@parthgoel6009]

this is the best explanation i have found. Thanks a lot

[@ВилиславВенков]

Nice explanation! This pattern (HOC) is very similar to the Decorator pattern, the goal is to add some functionality to an object through other object which I think is the same here.

[@blessedpigeon6304]

that's what i thought!

[@minh_tran]

He is such a great teacher

[@vigneshgvs]

syntax: enhancedComp = hoc(comp) HOC is a function, that takes 1 component as argument and returns enhanced new component. In export statement, need to export all the components, that are going to use common code, as that hoc component method. Hoc method In hoc, we need to pass ‘state & increment method’ as props, so original component can make use of it. In components that wanna reuse code: Will take from props. So no ‘this. ’ or state variable usages (mean - no local). Export with hoc component. Calling these components is normal way.

[@azaadsk]

Now I understand what is HOC. Thank you sir

[@bhrajgopal]

You are absolute genius . Thank you for the tutorial .

[@anandpari24]

Awesome, I feel better when I see this video. Simple explanation. Love it Guruji

[@user-mi8ew2to8e]

Was asked this interview today... Now I understand it haha

[@rgubri3711]

Man !! you are awesome. I have subscribed to Maximiller course in udemy, though it was good but very confusing. your course is perfect and easy to understand. I like the way you explained the example withIronMan. Thanks a lot for sharing this knowledge.

[@abdul1.wahaab]

one of the best explanations ever

[@STRIPPEDSTAR]

1:20 Really good example with Iron Man!

[@johnwick2138]

best video about HOC. Thank you! Your way of explaining is the best 👍

[@Devendrakr63]

Best Explanation on HOC

[@MindsMusing]

Iron man Example was the best I could find

[@thambimoirangthem4499]

like the practical example of tonyStork and his suit :)

[@colinpowell1339]

Excellent. Simply the best explanation on HOC!!!

[@shashwatpathak6033]

Man!! So simply you explained every topic specially HOC , Loved ironman example XD , it would be great if Redux tutorials with React also there! Really appreciate

[@edwinvw]

Best video so far explaining HOC. Great job =)!

[@afnanmk3760]

Thank you so much, Vishwas! you are just amazing! You made it so clear!!

[@richardzhang8756]

An excellent video about HOC!

[@bopaiahm.d1063]

Crisp & clear ... Love the explanation :)

[@morgilad8822]

You are awesome! Thank you very much for all of your videos.

[@raymondkalumbajoseph3943]

pretty interesting and way simpler, thank you very much its been helpful.

[@meysam8357]

Is that equal to custom hook in react function component

[@rakesh.rankawat]

Nice Man, Finally I learned HOC

[@adnantariq3346]

Beautiful man, just beautiful... who was your teacher 🤔

[@gunasekarant6498]

How to use HOC in functional component? I have tried it's giving useState error

[@nekoresOfficial]

Very nice effort, moderate speed. That makes me able to understand it very quickly. I just hit the subscribe button. I will keep in touch for your upcoming tutorial. Superb Man!

[@ibtesamuddin2061]

You are awesome Vishwas. Thanks a lot ♥ Love from Pakistan💕

[@AdnaanAhmedZohran]

I am coming from OOPS background and on looking at this HOC use case, the first thing that comes to my mind is MyClass extending a CounterBaseClass which has these functionalities of counter increment. Like I find this approach bit cleaner due to some reasons (which I can expand if interested). Can you please explain when and how should we use HOC instead of the polymorphism of classes.

[@bhupeshbhatt4334]

Yes brother, I have the same doubt.

[@LukasHollenstein]

Thanks for your clear explanations. Why is inheritance not simpler in such a scenario? We could implement a CounterBaseComponent and extend it to a ClickCounter and HoverCounter, isn’t it? Are there scenarios where the HOC or render-patterns are better suited than inheritance? I can imagine that the HOC can be used to wrap components with additional functionality that does not entail changing the WrappedComponent, like memoization or error handling or the like. Makes sense?

[@polyglotomathotheophilos1941]

For those uysing Code, you can press F2 on the declaraion name in order to rename all places where the name is found. It's much more efficient when you have many places where the components are used.

[@tharunn7266]

Thanks a Lot. I used to Find in files and Replace all manually before that.

[@conaxliu9677]

Love the Ironman metaphor.

[@vidyavshankar402]

Thanks a lot... Gave me a very clear understanding of higher order components...

[@harikotha7]

are you gonna do videos for React-Router and React-Redux as well? Btw thanks for all your videos👏

[@manjunathr8923]

How about context using instead of lifting state up? We can have the same logic in the context as well.