React Higher Order Components Tutorial | ReactJS HOC Pattern | React HOC in 30 Minutes for Beginners

In this video we are going to learn everything about Higher-Order Components in React. HOC is an advanced technique in React JS for reusing components logic. We will understand HOC and why it is required and what problem it solves with the help of a practical example and I will try to make it as simple as possible for you.
🔥 Relevel by Unacademy👇
It is India's first platform to help all aspirants have access to their dream job. By taking the Relevel Test, they engage in comprehensive skill assessments, which evaluate industry relevant skills and their job-readiness.
Platform link - relvl.co/ja4
Business Development: bit.ly/3AyFU5r
Backend Development: bit.ly/3uZsjmj
Frontend Development: bit.ly/3DksJGJ
⭐️GitHub link for Reference⭐️
github.com/dmalvia/React_High...
⭐️ Support my channel⭐️
www.buymeacoffee.com/dipeshma...
**React Roadmap for Developers in 2021**
How to Learn React JS ? - • React JS Roadmap for D...
React Fundamentals Project - • Learn React JS Fundame...
Learn React Redux with Project - • Learn React Redux with...
What is Redux ? - • Understanding Redux Co...
Learn React Redux Thunk with Project - • Learn React Redux Thun...
Learn CSS GRID Tutorial - • Learn CSS GRID Tutoria...
**Checkout these video to understand better**
JavaScript ES6 Arrow Functions - • JavaScript ES6 Arrow F...
JavaScript Higher Order Functions & Arrays Methods - • 13 Must Know JavaScrip...
JavaScript ES6 Destructuring - • JavaScript ES6 Destruc...
**More videos**
JSON Crash Course - • Learn JSON in 25 Minut...
Asynchronous Vs Synchronous Programming - • Asynchronous Vs Synchr...
Async JavaScript Callback - • Async JavaScript Callb...
Async JavaScript Promises Tutorial - • Async JavaScript Promi...
**Checkout my Crash courses for get started with web development**
JavaScript Tutorial For Beginners - • JavaScript Tutorial fo...
HTML5 Crash Course in 1 Hour - • HTML5 Crash Course for...
CSS Crash Course in 1 Hour - • CSS Crash Course For A...
🔗 Social Medias 🔗
Twitter: / imdmalvia
Facebook: / programmingwithdipesh
Instagram: / dipeshmalvia
LinkedIn: / dmalvia
⭐️ Tags ⭐️
- React Higher Order Components
- React HOC tutorial
- Learn HOC in React
- Create HOC Component
- React HOC For Beginners
⭐️ Hashtags ⭐️
#React #hoc #Beginners#Tutorials
Disclaimer:
It doesn't feel good to have a disclaimer in every video but this is how the world is right now.
All videos are for educational purpose and use them wisely. Any video may have a slight mistake, please take decisions based on your research. This video is not forcing anything on you.

[@DipeshMalvia]

Guys, if the video is helpful or you learned something than please appreciate and hit the LIKE and SUBSCRIBE button and help this channel to GROW😉

[@SuccessWheels]

Hey Dipesh, can you post video link for search functionality?

[@HardeepSingh-hv4gn]

why are you using fucking class component for HOC what the fuck r u doing u also don't know

[@jose6183]

That was actually a pretty clear and simple explanation. I understood you perfectly. So I just have a comment: isn't it better to use nowadays the newer React Hooks instead of using classes to create this kind of components? Instead of componentDidMount and all that it could be easier to implement via the useEffect() hook and as a regular functional component. Thanks anyway, great explanation!

[@baikovamaria5725]

it's exactly what I'm thinking about. Is the mix of approaches good?

[@NotInRightMind]

@@baikovamaria5725 it's same. idk the reason this person using class hoc instead func hoc. But it basically the same

[@Drayken]

Yes. You should use hooks nowadays, his example uses old React class constructors that's no longer necessary or used by anyone worth their salt at React. Chances are the reasoning for this, like a lot of smaller channels making React tutorials, they just read off of some other guide or old documentation instead of creating their own lesson.

[@vikasbairwa604]

loved the way you explained this topic, thank you.

[@DipeshMalvia]

You're very welcome!

[@vidyalakshmi6643]

This is pretty clear, thanks. Can you please make a video on server-side rendering and testing libraries too?🙂

[@hichamelkamouni9910]

Clear explanation , thanks for this video !

[@jeisongarzon6066]

plss make this same video but with functional Components instead of Class. Ty !!!

[@gamerzboy99]

Hoc can only use with functional component class component bekaar hai

[@lesleykamamo182]

You actually simplified things. Made the understanding of HOCs much easier.. thank you 😊

[@ravalravi882]

awsome dipesh really helped a lot thank you.

[@riversound8871]

Bro, you are awesome. Make very clear understanding of HOC.

[@jayantvasantkenjalkar6798]

Awesome, u explained it nicely !!

[@MohitKumar-tn1cf]

Really, you're doing great job !!

[@DipeshMalvia]

Thank you! Cheers!

[@meerabhaskaran8522]

You have a very well structured way of teaching. Thanks for making complicated topics look easy. :)

[@DipeshMalvia]

Glad you like them!

[@sameerjahangier9918]

such a great video thank you soo much

[@adarshtiwari7395]

Amazing explanation Dipesh! Just one question. We can use functional components in HOC right?

[@yoscbd]

Thank you, that was very useful and informative for me! :)

[@DipeshMalvia]

Glad it was helpful!

[@prasadchinthala1330]

very informative video for React HOC... Thanks 🙂👍

[@pushkarkumar5578]

Nice explanation Dipesh! Just one question. We can use functional components in HOC right?

[@joedu7320]

in the HOC, you passed the filtered Data to the WrappedComponent, even if its their first time render before you are typing any search term....

[@prabhatsrivastava8510]

Very helpful, clean, best explanation 👏

[@DipeshMalvia]

Glad it was helpful!

[@surendraediga208]

Great explanation

[@rahul14021]

Very well explained Appreciate .....

[@DipeshMalvia]

Thanks and welcome

[@shakir8378]

Thanks for making it 💯

[@DipeshMalvia]

Welcome!

[@S4LTYT]

@Dipesh malvia please make a video on for going for job interview and also for freshers how they should start from first day

[@lucifermorningstar1070]

Wonderful explanation. Hats off !! But there's one thing I didn't get, why did you use class component inside HOC, it was functional component that you started with. So why not continue using functional components ??

[@ashishbajaj5741]

+1

[@programmersohel]

Great

[@shucheendrat.m6024]

Thank you

[@divyadarbe]

very well explained...

[@DipeshMalvia]

Thank you so much 🙂

[@nancy7160]

Thanks :)

[@DipeshMalvia]

Welcome!

[@hiteshsuthar1097]

Keep up this playlist just like it

[@DipeshMalvia]

Sure, I will try my best.

[@user-kv5sd8fp5n]

I Have a question about the filteredData object inside the render function of the HOC... could we pass the property to be filtered as a prop of the HOC e.x. -> return d[props.FilterOnProperty].indexOf(term) >= 0; instead of using those if statements?

[@DipeshMalvia]

Yes, you can pass a props

[@jhs003]

Very easy explanation sir especially for beginners.. Make it little bit complicated

[@yogesh19953]

Hello sir, can you make video on javascript oops concepts like polymorphism, inheritance, etc with example, there is no good videos on this topic in youtube, also explain how this are used in reactjs. Thank you 😊

[@hiteshsuthar1097]

React uses Composition rather then inheritance.. kzbin.info/aero/PLWrQZnG8l0E6mYguSNWHZEz7KrfZULz8d

[@jamesmuhoro8568]

Very well explained, I have understood HOC's for the first time.

[@meysam8357]

Sir is that equal to custom hook in function component version

[@yashvanthkumar2576]

@Dipesh Malvia , Its well explained.

[@DipeshMalvia]

Thanks!

[@user121304]

Nice Explanation! I have a doubt, Do we have to use class based components in HOC component ?

[@Akankshakumari-kp3cg]

Yes you can

[@dickyjayaumbara357]

Hi sir, thank you for great video, i have a question, can we create extended class component in hoc contain like a useEffect, useState, etc, so we not using like componentDidMount?

[@srinivaspunith5996]

I Liked beginning and ending of the music of this video

[@DipeshMalvia]

Thanks!

[@arjungarad3251]

In userlist component you use two times return so my question is it possible??

[@osegocodes]

This has really been amazing Experience with Higher Order Components. Thank you for this great Video

[@coderevision3059]

functional component se class componnet pe kab aa gaye sir pata bhi nhi chala

[@shin5302]

Thank you for your excellent explanation. But I'm a little confused about something. Why don't you just return the functional component from the HOC component and use the useEffect hook instead?

[@sachinkoli-3935]

can we use normal functional component for creating HOC ?

[@haidarvohra1106]

yes u can

[@jyothidnj1]

Wow!!! you are good at explaining things in simple way.Thanks so much :)

[@________.pathfinder]

is it necessary to use class component?

[@regilearn2138]

please do a Render Props video,Thanks

[@DipeshMalvia]

Yes, I will

[@a4ankit27]

Is there a reason for creating HOC as a class component? Why didn't you use a functional component for HOC?

[@DipeshMalvia]

There is no specific reason, I used the example which I build in my project so I used class component.

[@ravalravi882]

dipesh why you have used class based component in Hoc ? can we do that with functional component ?

[@shashidharvarne1059]

yes we can

[@vinaykumar6916]

Bro please make video on Rtk query with toolkit

[@DipeshMalvia]

Already add in my list.

[@vinaykumar6916]

@@DipeshMalvia so when we will expect to come any idea

[@DeepakGupta-pz4fx]

Please next video React authentication and Redux saga

[@DipeshMalvia]

Already added in my list.

[@synearielbot8622]

can we pass WrapperComponent state to HOC component ?

[@SuccessWheels]

why did you create class component in HOC? why not functional component?

[@abheemk]

Hi Dipesh, wondering why you used class there

[@DipeshMalvia]

Good question - I wanted to have states in my returned component but if I use function component than I cannot make use of useState hook. I will leave to you give a try and see what error you get.

[@tausifkovadiya1810]

Error will be : React Hook "useState" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function.

[@RinkaMizuki]

@@tausifkovadiya1810 we can handle it. This error is because react doesn't understand when you return an anonymous component so in HOC component you should create a NewComponent and handle logic in return WrappedComponent and in HOC component return NewComponent. And problem solved

[@RinkaMizuki]

@@DipeshMalvia I'm sure it's possible because I did it

[@ThandaTaco4505]

why are you using class component for hoc?

[@wayneswildworld]

Why would you all of a sudden switch to a class-based component?

[@prajwalpandeshwar9967]

Easy Explanation. Thanks!

[@aashayamballi]

Instead of creating HOC you could have created a custom hook for this.

[@DipeshMalvia]

Yes, we could have create custom hook.

[@manassahu576]

Feedback: Your voice is a little low in all of your videos, whereas your intro music is too loud. Please keep a balance of sound.

[@DipeshMalvia]

Thanks for the tips!

[@user-po5cp1oj9f]

why you are using class componen if you are working in funcitonal component! some people may stated learning on functional component!

[@kkunal45]

Why u have not return a functional component in hoc

[@Drayken]

Yeah man I'm not sure why this is linked in some of these React lesson lists when bro doesn't even know you don't need to "let" variables, as react renders entirely new instances of const variables, so you should just const them. The mixing of styles between useState and this.state also tells me he's probably just reading off of other people's old guides or docs and mix and matching stuff he doesn't actually understand. Not a fan, anyways just use custom hooks.

[@jazibbashar3332]

Everything is cleared but hoc componet Is not clear they that can understand how it's works

[@rmt0858]

Hoc ko bhi functional component bna dete to kuch smjh ata

[@137dylan]

I like your videos, Dipesh, but this one frustrates me. The audio quality of your voice is low. Additionally, most of your screen is taken up by the sidebar, terminal and browser output. The code section of the IDE is very small, yet it's the most important thing for the viewer.

[@DipeshMalvia]

Apologies for that, I will be extra careful and take note of these points. Thank-you

[@Gauravguptakumar]

Very nice, clean and detailed explanation on HOC.

[@nandinibagga5066]

jump to 16:10

[@khizrshaikh9902]

First I want heart

[@neilstrong1735]

Arey babu concept actually starts at 20:0

[@JEEVRAJTARALKAR]

Everything was good, until class based components came into picture and I felt like I wasted time

[@MundiWay]

Video Start from 16:00////Edit: next 14 mins are also waste -_-.

[@shakilahmed6870]

You were using functional for the app,todoList,UserList and you jumped to class component immediately for the HOC component and you did not even explain why you did this. What a confusing tutorial

[@sahilsharma1inspirationalTape]

you always dissapoints

[@abhinavgupta2455]

I am new to React please help me what is this concept called. {profiles.map((profile) => { const userName = users[profile.userID].name; const favMovieName = movies[profile.favoriteMovieID].name;