11 - Higher-Order Components in React - React Higher-Order Components with Example - React Patterns

[@tapasadhikary]

Content 0:00 - Introduction 00:43 - What is React Higher-Order Component Pattern? 12:40 - React Higher-Component Pattern with Examples. 29:13 - Wrapping up & What's Next?

[@willianandrade1357]

A HOC is a simple JavaScript function which accepts a component (another js function) and returns a completely new enhanced component based of the first one. The HOCs are nothing more than a way of reusing code to create cleaner and simpler React components. This was my understanding of the subject! Thank you Tapas for the amazing videos so far!

[@tapasadhikary]

That's great. You got it right 🙌

[@spectacular5595]

mind Blowing , HOC is very difficult concept to understand , but you make it easy . i really thought HOC is like a rocket science but after your explanation its peace of cake . 😁

[@tapasadhikary]

Very nice, I am so glad it helped you.

[@practicalandplannedhomeschool]

I'm relieved to finally find a video that clears up how HOCs work with the standard components! Thank you!

[@tapasadhikary]

Great, you are welcome, Kelly.

[@harika218]

HOC is a simple JS function that takes a component and returns an enhanced component. The purpose of HOC is something that we want to reuse side effects to create enhanced components. This was my understanding about HOC. Thanks for sharing the content. Your explaining all the concepts in simple way.

[@tapasadhikary]

Great 👍 thanks 🙏

[@eliasimokhai]

'Perfect' is the word for this tutorial

[@tapasadhikary]

Thank you 🙏

[@jlvbcoop]

Understanding what HOCs are was something I had yet to do. This video perfectly explains what they are. I have understood that with the arrival of the custom Hooks the HOC begin to be replaced, this is a great clarification. Thanks for this good explanation.

[@tapasadhikary]

Glad to hear that 👍

[@lindatochukwu3081]

@@tapasadhikary sir, does it mean both HOC and custom hooks can do the same task?

[@tapasadhikary]

@lindatochukwu3081 yes they certainly can. When functional component came in picture, the hook usage became much higher.

[@shohanredwan]

WoW... Just wow... Best of best... Great explanation with practical example. Thanks

[@tapasadhikary]

Thank you! I’m glad you liked it ✨

[@sublimeelectrons8699]

It is good to know that HOCs are just plain JavaScript function that accepts another function as its input and it returns(outputs) an enhanced function.

[@tapasadhikary]

Yes

[@govinda399]

Highly recommended for every beginner, because other videos and even udemy courses are just confusing on this topic. This one must see ...

[@tapasadhikary]

Thanks a lot, Govindji 🙏

[@farukabdullamunshi8358]

Great explanation of HOC, very useful for any React-beginner to grasp the concept.

[@tapasadhikary]

Thanks! Glad you found it helpful 💙

[@haroonhayat4797]

I see alot of videos on HOC. but Tapas Bhai you are great, clear-cut explanation 😍. And actually you make the web very simplified for us.

[@tapasadhikary]

Thanks Bhai, means a lot. Please feel free to share in your circle for others to get it too 🙏

[@JamiiTraffic]

I have read about HOCs several times, but never clearly understood. This was well done.

[@tapasadhikary]

That’s wonderful, thank you!

[@JamiiTraffic]

@@tapasadhikary I am a great fan of yours. Just messaged your react organization.

[@tapasadhikary]

@@JamiiTraffic THANK YOU! It means a lot to me. Btw, which React Organization you meant? ReactPlay? Where can I find your message?

[@JamiiTraffic]

@@tapasadhikary Yes, ReactPlay. I sent it to the mail displayed on the git profile overview.

[@tapasadhikary]

Thank you! We have responded.

[@shubhamsonawane967]

"perfectttttttttttttttttttttttttttttttttttttttttttt" explaination is the word for your explaination.

[@tapasadhikary]

Hey thanks man 💛

[@abhishekholani9579]

Great Content. Explanation was very good, from basic understanding to implementation with a good example. Thankyou!

[@tapasadhikary]

I appreciate you comment. Glad it was helpful.

[@mdsumonh.shohan9159]

I think HOC makes a react componet much cleaner it bring the UI centric data out from a component and it handles the all side effects. now we can create a component wrapping with HOC and get a new our UI data as we can show.

[@tapasadhikary]

Yeah since we have the concept of hooks now, similar reusability and encaptulation is possible using hooks too.

[@sonamona2010]

Brilliant way of explaining, thank you!

[@tapasadhikary]

Thank you Uma and you are welcome 🙏

[@simone-oq4if]

great video, the explanation was clear and simple. thank you

[@tapasadhikary]

Thanks a lot 💛

[@ankitaburman5406]

Excellent Explanation Tapas 👍 🫡

[@tapasadhikary]

Thanks, Ankita. I am glad.

[@esakkis9727]

Really really very good videos. I seraced diffing algo and find ur video. Then addicted and watching ur react playlist from begin. Thank you so much for such clean and clear explanation. Kudos to your work 🎉. Would like to learn unit testing from your knowledge 😊

[@tapasadhikary]

Alright! Will talk about it 🙌

[@ankansharma4897]

Sir Please make a video on lifecycle method of React class-based component. Also I am a bit confused. what is the fundamental difference between HOC and functional component with propsWithChildren. I can achieve similiar things using any of them. Is there any specific usecases for each of them.

[@tapasadhikary]

People hardly use class-based components now, also in interviews, we have stopped asking questions about it 😀. So I think hardly anyone would be interested in the topic. But yes, if I get more requests, I shall make it too. Thanks! Coming to your other questions, they are two different patterns but the end goal they are serving is quite the same.

[@patshalaaa]

Awesome ... recommend to watch

[@tapasadhikary]

Great 👍

[@diyaagubarah3328]

Nice explanation thank you 🔥🔥.

[@tapasadhikary]

Thank you 💙

[@rifleking6189]

Great video. Thank you

[@tapasadhikary]

Thank you!

[@akhileshmishra5559]

thank you man first time got this logic

[@tapasadhikary]

You are welcome.

[@akhileshmishra5559]

@@tapasadhikary can you please make video on this keyword

[@tapasadhikary]

@@akhileshmishra5559 I'll cover lots on JavaScript fundamentals including the 'this' keyword in 2023. That's my primary plan to do on KZbin.

[@himanshujaviya6021]

Finally after going through bunch of videos found this and understood Hoc in one shot 🔥🔥🔥🔥⚡⚡ master. Which hook do we use instead of Hocs

[@tapasadhikary]

Thanks a lot 🙏 Which hook is based on your use case. For example if you use HOC to make api call, you can create a hook to handle that instead

[@prathameshkhadakban1485]

Thanks Tapas.

[@tapasadhikary]

Welcome

[@ettdoorson173]

Wonderful.. It was/is really beneficial to me... I want to find that video to pull info from a Google Sheet where you are talking about... 😃

[@tapasadhikary]

You are most welcome 🤗

[@ankurworld]

Hi Tapas da, Excellent video. Simple and easy Explanation. Higher Order component act Like a Machine. It takes a Component as a Input and Gives Finish Product which enhances the Component. Just like a Plug-in. One Question : Inside HOC code there is a withFetch Function, inside it you have written a nested class component WithFetch. Is it good to write the class component outside withFetch Function. May be in a different .js file. My issue is why you are nesting it ??

[@tapasadhikary]

Yes we can write it out and import too and return. Usually you write in a separate file for reusability. In our case, it was nothing such but technically you can.

[@kevalpatel4895]

Great content and amazing explanation, sir.

[@tapasadhikary]

I’m glad it helped 💙

[@talhaahmad1796]

You deserve 1 Million

[@tapasadhikary]

I hope, one day 😀. Thank you

[@LernardGrigsby]

I love your videos. I'm confused by the naming in line 21 of MovieList.js My understanding was that withFetch was the HOC and is passed the Skeleton/Wrapped MovieList component, and then returns an Enhanced MovieList component. is the convention to refer to withFetch or the exported wrapped component as the HOC? Thanks again for the videos!

[@tapasadhikary]

Both works. 1. We can do export default withFetch(Wrapped); 2 We can also do, const Enhanced = withFetch(Wrapped); export default Enhanced; Also as we are exporting as default, we can import the enhanced component with any name elsewhere. In our example, we import with MovieList only but we could hv done as MovieListEnhanced. Also with... is a convention people use for HOC but it is not a strict standard. I hope I understood your question, Lernad. If no, kindly ask again; I'll indeed clarify. Thanks a lot for watching the videos 💙

[@gandharvaravi4371]

in APP.JS you are importing MovieList component, but inside MovieList component you are exporting HOC ? i am confused.

[@tapasadhikary]

Hey Gandharva, as the export is a default export, you can import with any name. So while exporting we pass the MovieList component to the HOC to get a brand new component and exporting that. As we are doing default export, we can import with any name. In the video I'm using the same MovieList name. We can use any other name while importing like MovieListHOC.

[@gandharvaravi4371]

@@tapasadhikary got it. Thank you.

[@haseebalamrafiq9915]

I really like your videos sir. Love from Pakistan. Sir, Should I return 2 components, which we have same logic, like first is wrappedComponent and other is for TabularData component so should i do that ? const withFetch = (WrappedComponent, TabularData) => { then in return return ( ) Is this possible ? I thing by doind this then we take a advantage of HOC in real means.

[@tapasadhikary]

Hi Haseeb, Greeting from India. I'm glad you are finding the videos helpful. You have a great point about the HOC usage. Yes you can do that by passing multiple components. Just a small correction in the example you showed. The jsx return should wrap them in a div or fragment.

[@nikhilm5651]

Awesome👏👌

[@tapasadhikary]

Thanks!

[@Ilayaraja-oy1vj]

Clear understand

[@tapasadhikary]

Nice

[@andrewaghoghovwia1948]

Thanks for the explanation, I love it but Higher Order Components can also be used in Functional Components? Can't it?

[@tapasadhikary]

Thank you! Yes, absolutely, you can do it.

[@jaycodes8790]

I subscribed your channel on the promise that you keep sharing the experience and knowlede to me...... 😛

[@tapasadhikary]

Thanks man

[@bhagirathibehera4776]

good one

[@tapasadhikary]

Thank you 🙏

[@vishaljaiswal5056]

how it is different from just passing the fetched data in props of the component which you are enhancing, beacuse the structure of movie list will always be same ,just the dat inside it is changing

[@tapasadhikary]

The HOC helps take out reusable pieces. In our example, the HOC is used to take out the fetching of the movie data and enhance any component with that. You can do the same by repeating the fetch logic in both the components. Another way is to use hook to take out the common logic.

[@testify7228]

Please make it functional components

[@amrbenattia]

Good video but showing subscribe every time is annoying 🎉

[@tapasadhikary]

Hey thanks for letting me know

[@AbhishekSingh9135]

Thanks Tapas.

[@tapasadhikary]

Welcome, Abhishek 🙌