11 - Higher-Order Components in React - React Higher-Order Components with Example - React Patterns
ฝัง
- เผยแพร่เมื่อ 5 ส.ค. 2024
- 👋 What is the Higher-Order Component pattern in React? A FAQ in Web Developer Interviews. Let's master this concept with examples. This video teaches you everything to get started with the React Higher-Order Component(HOC) Pattern. I hope you find it helpful 😊.
🏃 All set? Let's go then...
Timecodes
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?
🔗 Important Links mentioned in the video:
- Source Code Used in the Project: github.com/atapas/youtube/tre...
- Please Reach out on Twitter: / tapasadhikary
- Showwcase ReactJS Community: www.showwcase.com/community/r...
Other Links:
- Blog: blog.greenroots.info/
- GitHub: github.com/atapas
🤝 You can support my work by following me on the above platforms and/or sponsoring me using any of these links.
- blog.greenroots.info/sponsor
- buymeacoffee.com/greenroots
- paypal.me/greenrootsinfo
Many Thanks 🙏
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?
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!
That's great. You got it right 🙌
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 . 😁
Very nice, I am so glad it helped you.
I'm relieved to finally find a video that clears up how HOCs work with the standard components! Thank you!
Great, you are welcome, Kelly.
Great Content. Explanation was very good, from basic understanding to implementation with a good example. Thankyou!
I appreciate you comment. Glad it was helpful.
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.
Glad to hear that 👍
@@tapasadhikary sir, does it mean both HOC and custom hooks can do the same task?
@lindatochukwu3081 yes they certainly can. When functional component came in picture, the hook usage became much higher.
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.
Thanks Bhai, means a lot. Please feel free to share in your circle for others to get it too 🙏
Great explanation of HOC, very useful for any React-beginner to grasp the concept.
Thanks! Glad you found it helpful 💙
WoW... Just wow... Best of best... Great explanation with practical example. Thanks
Thank you! I’m glad you liked it ✨
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 😊
Alright! Will talk about it 🙌
Brilliant way of explaining, thank you!
Thank you Uma and you are welcome 🙏
'Perfect' is the word for this tutorial
Thank you 🙏
great video, the explanation was clear and simple. thank you
Thanks a lot 💛
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.
Great 👍 thanks 🙏
Great video. Thank you
Thank you!
Awesome ... recommend to watch
Great 👍
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.
Yes
Excellent Explanation Tapas 👍 🫡
Thanks, Ankita. I am glad.
Awesome👏👌
Thanks!
Thanks Tapas.
Welcome, Abhishek 🙌
Nice explanation thank you 🔥🔥.
Thank you 💙
Great content and amazing explanation, sir.
I’m glad it helped 💙
thank you man first time got this logic
You are welcome.
@@tapasadhikary can you please make video on this keyword
@@akhileshmishra5559 I'll cover lots on JavaScript fundamentals including the 'this' keyword in 2023. That's my primary plan to do on TH-cam.
I have read about HOCs several times, but never clearly understood. This was well done.
That’s wonderful, thank you!
@@tapasadhikary I am a great fan of yours. Just messaged your react organization.
@@JamiiTraffic THANK YOU! It means a lot to me. Btw, which React Organization you meant? ReactPlay? Where can I find your message?
@@tapasadhikary Yes, ReactPlay. I sent it to the mail displayed on the git profile overview.
Thank you! We have responded.
Finally after going through bunch of videos found this and understood Hoc in one shot 🔥🔥🔥🔥⚡⚡ master. Which hook do we use instead of Hocs
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
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... 😃
You are most welcome 🤗
I subscribed your channel on the promise that you keep sharing the experience and knowlede to me...... 😛
Thanks man
"perfectttttttttttttttttttttttttttttttttttttttttttt" explaination is the word for your explaination.
Hey thanks man 💛
Highly recommended for every beginner, because other videos and even udemy courses are just confusing on this topic. This one must see ...
Thanks a lot, Govindji 🙏
good one
Thank you 🙏
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 ??
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.
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!
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 💙
Clear understand
Nice
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.
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.
in APP.JS you are importing MovieList component, but inside MovieList component you are exporting HOC ? i am confused.
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.
@@tapasadhikary got it. Thank you.
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
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.
Hey Tapas
Yesterday night I was going in depth on the topic of HOC.
The thing I realized that whatever I want to do in React, I can achieve that by all three options HOC, Context API, Redux
So I am confuse now, where do I draw the line between them.
And for what specific usecase, I should use them and why?
Hi Numan, thanks for asking! HOC, Context API and Redux are three different concepts serves their different purposes of application building.
HOC: A higher-order component is a function that takes a component as input and returns a new component with additional functionality. It reuses code, logic, and state across multiple components. So Reusability is the key here.
Context API: The context API is used to provide a global state that any component in the application can access without the need for props. It helps simplify the data flow and reduce the code needed for prop drilling. In general, you have some static value in context and use it. An application may have many contexts for managing themes, logged in user's state, etc.
Redux: Redux is a state management concept used to manage the application state in a predictable and centralized way. It helps to simplify the data flow and make debugging easier. Usually, One global state that any part of the application can modify.
Let me know if your understanding is better than before. Feel free to ask questions.
@@tapasadhikary although, I already know the difference between them by definition.
But if I see the broader picture, all of these things are doing one thing and that is separating business logic from UI of the component.
Let's forget the concept of global state management, and if we see then HOC separates the UI and business logic, redux separate the UI and handle the business logic in the store and slices, and context API also separates the hooks logic from the actual component where they are being implemented. Obviously, the way by which they do all this changes, but each task can be achieved by all three of them at the end.
Previously, maybe my question wasn't clear that much, but hope it makes sense now?
That’s right! This goes back to the basic programming design principles of sharing, reusability, etc. There are different ways to achieve these.
IMO, the way we should think of each of these functionalities is about their speciality and areas of use. Underlying the concept or bigger goals could be similar.
@@tapasadhikary now, I got your point. Thanks
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.
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.
Thanks for the explanation, I love it but Higher Order Components can also be used in Functional Components? Can't it?
Thank you!
Yes, absolutely, you can do it.
Please make it functional components
Good video but showing subscribe every time is annoying 🎉
Hey thanks for letting me know
You deserve 1 Million
I hope, one day 😀. Thank you
Thanks Tapas.
Welcome