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!
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.
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 ??
Why you use class component when you are using functional component it will be hard to grap both things at a time although you explain it very good and i hope everyone understand it properly great job bhaiya 😀❤
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 😊
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?
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?
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.
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.
@@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
Guys please help I am not sure why but in my case componentDidMount is not getting called with same example explained in video. Please share leads if any. thanks
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?
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.
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.
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
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;
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😉
Hey Dipesh, can you post video link for search functionality?
why are you using fucking class component for HOC what the fuck r u doing u also don't know
plss make this same video but with functional Components instead of Class. Ty !!!
Hoc can only use with functional component class component bekaar hai
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!
it's exactly what I'm thinking about. Is the mix of approaches good?
@@baikovamaria5725 it's same. idk the reason this person using class hoc instead func hoc. But it basically the same
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.
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 ??
+1
Bro, you are awesome. Make very clear understanding of HOC.
@Dipesh malvia please make a video on for going for job interview and also for freshers how they should start from first day
Very easy explanation sir especially for beginners.. Make it little bit complicated
You have a very well structured way of teaching. Thanks for making complicated topics look easy. :)
Glad you like them!
Nice explanation Dipesh! Just one question. We can use functional components in HOC right?
Why would you all of a sudden switch to a class-based component?
very informative video for React HOC... Thanks 🙂👍
You actually simplified things. Made the understanding of HOCs much easier.. thank you 😊
Very helpful, clean, best explanation 👏
Glad it was helpful!
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....
Why you use class component when you are using functional component it will be hard to grap both things at a time although you explain it very good and i hope everyone understand it properly great job bhaiya 😀❤
loved the way you explained this topic, thank you.
You're very welcome!
Awesome, u explained it nicely !!
Really, you're doing great job !!
Thank you! Cheers!
Very well explained Appreciate .....
Thanks and welcome
I Liked beginning and ending of the music of this video
Thanks!
Nice Explanation! I have a doubt, Do we have to use class based components in HOC component ?
Yes you can
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 😊
React uses Composition rather then inheritance..
ruclips.net/p/PLWrQZnG8l0E6mYguSNWHZEz7KrfZULz8d
awsome dipesh really helped a lot thank you.
why did you create class component in HOC? why not functional component?
This has really been amazing Experience with Higher Order Components. Thank you for this great Video
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?
Clear explanation , thanks for this video !
@Dipesh Malvia , Its well explained.
Thanks!
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?
Yes, you can pass a props
Thank you, that was very useful and informative for me! :)
Glad it was helpful!
such a great video thank you soo much
Very well explained, I have understood HOC's for the first time.
Is there a reason for creating HOC as a class component? Why didn't you use a functional component for HOC?
There is no specific reason, I used the example which I build in my project so I used class component.
This is pretty clear, thanks. Can you please make a video on server-side rendering and testing libraries too?🙂
Keep up this playlist just like it
Sure, I will try my best.
Great explanation
very well explained...
Thank you so much 🙂
functional component se class componnet pe kab aa gaye sir pata bhi nhi chala
Thanks for making it 💯
Welcome!
Thanks :)
Welcome!
Hi Dipesh, wondering why you used class there
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.
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.
@@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
@@DipeshMalvia I'm sure it's possible because I did it
please do a Render Props video,Thanks
Yes, I will
is it necessary to use class component?
can we use normal functional component for creating HOC ?
yes u can
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.
Thanks for the tips!
Please next video React authentication and Redux saga
Already added in my list.
Bro please make video on Rtk query with toolkit
Already add in my list.
@@DipeshMalvia so when we will expect to come any idea
Great
Guys please help I am not sure why but in my case componentDidMount is not getting called with same example explained in video. Please share leads if any.
thanks
Sir is that equal to custom hook in function component version
dipesh why you have used class based component in Hoc ? can we do that with functional component ?
yes we can
Very nice, clean and detailed explanation on HOC.
why are you using class component for hoc?
Thank you
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?
In userlist component you use two times return so my question is it possible??
why you are using class componen if you are working in funcitonal component!
some people may stated learning on functional component!
Wow!!! you are good at explaining things in simple way.Thanks so much :)
Easy Explanation. Thanks!
can we pass WrapperComponent state to HOC component ?
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.
Apologies for that, I will be extra careful and take note of these points. Thank-you
Instead of creating HOC you could have created a custom hook for this.
Yes, we could have create custom hook.
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.
jump to 16:10
Why u have not return a functional component in hoc
Everything is cleared but hoc componet Is not clear they that can understand how it's works
Hoc ko bhi functional component bna dete to kuch smjh ata
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
Arey babu concept actually starts at 20:0
Everything was good, until class based components came into picture and I felt like I wasted time
First I want heart
Video Start from 16:00////Edit: next 14 mins are also waste -_-.
nahi samza kuch bhi, HAHAHA
you always dissapoints
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;
Amazing explanation Dipesh! Just one question. We can use functional components in HOC right?