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

Поділитися
Вставка
  • Опубліковано 18 гру 2024

КОМЕНТАРІ • 114

  • @DipeshMalvia
    @DipeshMalvia  3 роки тому +16

    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
      @SuccessWheels 2 роки тому

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

    • @HardeepSingh-hv4gn
      @HardeepSingh-hv4gn 9 місяців тому

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

  • @jose6183
    @jose6183 3 роки тому +22

    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
      @baikovamaria5725 2 роки тому

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

    • @NotInRightMind
      @NotInRightMind Рік тому

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

    • @Drayken
      @Drayken 8 місяців тому

      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.

  • @rahul14021
    @rahul14021 Рік тому +1

    Very well explained Appreciate .....

  • @prabhatsrivastava8510
    @prabhatsrivastava8510 2 роки тому +1

    Very helpful, clean, best explanation 👏

  • @jeisongarzon6066
    @jeisongarzon6066 2 роки тому +8

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

    • @gamerzboy99
      @gamerzboy99 Рік тому

      Hoc can only use with functional component class component bekaar hai

  • @MohitKumar-tn1cf
    @MohitKumar-tn1cf 3 роки тому +2

    Really, you're doing great job !!

  • @jayantvasantkenjalkar6798
    @jayantvasantkenjalkar6798 Рік тому

    Awesome, u explained it nicely !!

  • @meerabhaskaran8522
    @meerabhaskaran8522 2 роки тому +1

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

  • @riversound8871
    @riversound8871 Рік тому

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

  • @lucifermorningstar1070
    @lucifermorningstar1070 2 роки тому +8

    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 ??

  • @user121304
    @user121304 2 роки тому +2

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

  • @vikasbairwa604
    @vikasbairwa604 3 роки тому +1

    loved the way you explained this topic, thank you.

  • @ΠΑΝΑΓΙΩΤΗΣΜΗΤΡΟΠΑΝΟΣ

    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?

  • @adarshtiwari7395
    @adarshtiwari7395 2 роки тому +1

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

  • @hichamelkamouni9910
    @hichamelkamouni9910 2 роки тому

    Clear explanation , thanks for this video !

  • @jhs003
    @jhs003 Рік тому

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

  • @srinivaspunith5996
    @srinivaspunith5996 2 роки тому +1

    I Liked beginning and ending of the music of this video

  • @yashvanthkumar2576
    @yashvanthkumar2576 Рік тому +1

    @Dipesh Malvia , Its well explained.

  • @prasadchinthala1330
    @prasadchinthala1330 Рік тому

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

  • @surendraediga208
    @surendraediga208 2 роки тому

    Great explanation

  • @ravalravi882
    @ravalravi882 2 роки тому

    awsome dipesh really helped a lot thank you.

  • @divyadarbe
    @divyadarbe 3 роки тому +1

    very well explained...

  • @yoscbd
    @yoscbd 3 роки тому +1

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

  • @lesleykamamo182
    @lesleykamamo182 3 роки тому +3

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

  • @shakir8378
    @shakir8378 3 роки тому +1

    Thanks for making it 💯

  • @sameerjahangier9918
    @sameerjahangier9918 2 роки тому

    such a great video thank you soo much

  • @joedu7320
    @joedu7320 Рік тому +1

    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....

  • @codewithkaran8860
    @codewithkaran8860 5 місяців тому

    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 😀❤

  • @nancy7160
    @nancy7160 Рік тому +1

    Thanks :)

  • @hiteshsuthar1097
    @hiteshsuthar1097 3 роки тому +1

    Keep up this playlist just like it

  • @yogesh19953
    @yogesh19953 3 роки тому +2

    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
      @hiteshsuthar1097 3 роки тому

      React uses Composition rather then inheritance..
      ua-cam.com/play/PLWrQZnG8l0E6mYguSNWHZEz7KrfZULz8d.html

  • @sachinkoli-3935
    @sachinkoli-3935 2 роки тому +2

    can we use normal functional component for creating HOC ?

  • @S4LTYT
    @S4LTYT 3 роки тому +1

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

  • @jamesmuhoro8568
    @jamesmuhoro8568 2 роки тому +1

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

  • @SuccessWheels
    @SuccessWheels 2 роки тому +3

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

  • @shin5302
    @shin5302 2 роки тому +3

    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?

  • @meysam8357
    @meysam8357 2 роки тому

    Sir is that equal to custom hook in function component version

  • @abheemk
    @abheemk 3 роки тому +1

    Hi Dipesh, wondering why you used class there

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому

      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
      @tausifkovadiya1810 2 роки тому +1

      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
      @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
      @RinkaMizuki Рік тому

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

  • @osegocodes
    @osegocodes Рік тому +1

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

  • @prajwalpandeshwar9967
    @prajwalpandeshwar9967 Рік тому

    Easy Explanation. Thanks!

  • @programmersohel
    @programmersohel 2 роки тому

    Great

  • @arjungarad3251
    @arjungarad3251 2 роки тому

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

  • @coderevision3059
    @coderevision3059 2 роки тому +1

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

  • @vidyalakshmi6643
    @vidyalakshmi6643 3 роки тому

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

  • @ravalravi882
    @ravalravi882 2 роки тому

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

  • @regilearn2138
    @regilearn2138 3 роки тому +1

    please do a Render Props video,Thanks

  • @jyothidnj1
    @jyothidnj1 2 роки тому

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

  • @Gauravguptakumar
    @Gauravguptakumar 10 місяців тому

    Very nice, clean and detailed explanation on HOC.

  • @shucheendrat.m6024
    @shucheendrat.m6024 2 роки тому

    Thank you

  • @dickyjayaumbara357
    @dickyjayaumbara357 3 роки тому +2

    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?

  • @________.pathfinder
    @________.pathfinder Рік тому

    is it necessary to use class component?

  • @vinaykumar6916
    @vinaykumar6916 3 роки тому +1

    Bro please make video on Rtk query with toolkit

    • @DipeshMalvia
      @DipeshMalvia  3 роки тому +1

      Already add in my list.

    • @vinaykumar6916
      @vinaykumar6916 3 роки тому

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

  • @DeepakGupta-pz4fx
    @DeepakGupta-pz4fx 3 роки тому +1

    Please next video React authentication and Redux saga

  • @a4ankit27
    @a4ankit27 8 місяців тому +1

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

    • @DipeshMalvia
      @DipeshMalvia  8 місяців тому

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

  • @wayneswildworld
    @wayneswildworld 3 роки тому +9

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

  • @nandinibagga5066
    @nandinibagga5066 Рік тому +1

    jump to 16:10

  • @shivangigoel4464
    @shivangigoel4464 2 місяці тому

    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

  • @synearielbot8622
    @synearielbot8622 2 роки тому

    can we pass WrapperComponent state to HOC component ?

  • @manassahu576
    @manassahu576 3 роки тому +2

    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.

  • @ThandaTaco4505
    @ThandaTaco4505 11 місяців тому

    why are you using class component for hoc?

    • @TejasNesarikar
      @TejasNesarikar 3 дні тому

      because hoc always used with class based components......

  • @KamranAliMultani
    @KamranAliMultani Рік тому

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

  • @aashayamballi
    @aashayamballi 2 роки тому +2

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

    • @DipeshMalvia
      @DipeshMalvia  2 роки тому

      Yes, we could have create custom hook.

  • @kkunal45
    @kkunal45 3 роки тому

    Why u have not return a functional component in hoc

  • @137dylan
    @137dylan 3 роки тому +1

    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
      @DipeshMalvia  3 роки тому +2

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

  • @MundiWay
    @MundiWay Рік тому

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

  • @khizrshaikh9902
    @khizrshaikh9902 3 роки тому +1

    First I want heart

  • @rmt0858
    @rmt0858 2 роки тому +1

    Hoc ko bhi functional component bna dete to kuch smjh ata

  • @Drayken
    @Drayken 8 місяців тому

    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.

  • @neilstrong1735
    @neilstrong1735 2 роки тому

    Arey babu concept actually starts at 20:0

  • @shakilahmed6870
    @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

  • @jazibbashar3332
    @jazibbashar3332 Рік тому

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

  • @JEEVRAJTARALKAR
    @JEEVRAJTARALKAR 10 місяців тому

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

  • @lalitgaikwad7238
    @lalitgaikwad7238 6 місяців тому

    nahi samza kuch bhi, HAHAHA

  • @sahilsharma1inspirationalTape

    you always dissapoints

  • @abhinavgupta2455
    @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;

  • @pushkarkumar5578
    @pushkarkumar5578 2 роки тому +3

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