React Higher Order Components Tutorial

React JS Higher Order Component ( HOC ) utility to translate props to styles and set default props. WrappedComponent is passed through a higher order function.

code from this tutorial

Full React JS tutorial Series Playlist

Please be my patreons on patreaon

Follow me for technology updates

Help me translate this video.

[Sapphiamur]

This is kind of hard to digest for someone like me who's just starting with React/JS in general, but a great example nonetheless. I'm gonna go over it multiple times and see if I can replicate something similar in my code :d. Thank you!

[cyrusbesabella]

yes this one is hard, but if you don't know JS higher order function itself, surely you wont get this in one sitting. Thanks again sir!

[swaroopvoleti]

Great stuff, you made me use HOC comfortably without any issues and I have to develop similarly in my project which is creating multiple iterations of buttons.

[Middollo]

Sorry but this is not a very good HOC explanation.

[jeffwei]

I've been thinking about the HOC part of this and I like to share with everyone what I came up with. Let me know if you disagree.
The goal is we want to take the original component and get an updated component, by passing the original component into a function. So I changed the functions names to better reflect that.
export default (originalComponent) => {
return function updatedComponent(args) {
return
}
}
In techsith's example ButtonOne is the originalComponent, I think that component gets saved in the closure belonging to the updatedComponent function. The updatedComponent function gets returned to stylesWrapper, and stylesWrapper completes it by passing in the props object as the args argument.

[michaelerwin]

I prefer if you to go back to zen mode of teaching enlightenment rather than confusion.

[sandeep]

Thank you so for this tutorial, learned a lot from this. You are videos are so descriptive and easily understandable. My request is, can you do a few videos on testing react apps?

[TheFajaman]

Great stuff sir, your videos made me understand React much better than before, I hope you'll make something about Redux and proper way to dispatch actions from children components.
Keep up the good work!

[pradipspeaks]

Nice. HOC seems best when I am refactoring existing components to add some masala over it. No changes inside all existing components, just wrap it in HOC and use it instead.

[ize]

can @techsith or anyone explain @13:10
Why do we have to return the wrappedComponent from inside of return function wrappedRender(args){...},
and not directly...?

[dohyun]

this one was hard ㅜㅜ but thanks i see what your trying to explain i will just have get used to this

[patcoston]

Usually your tutorials are very informative but this one was a hot mess with too many mistakes. You wrote complicated code without explaining how and why it works.

[calebolojo]

I always Like your videos before it starts!
Your simplistic style of teaching is great! Thanks!

[rohandevaki]

how are you getting the props as args in return function wrappedRender(args) ?

[ckvinothkumar]

@techsith - How the wrapperRender method get called? wrapperRender is built-in method in react like render method ?

[hiteshparashar]

Hi Thanks, just one question. How the props of ButtonOne are getting assigned to parameter named args of wrappedRender function?

[bahusworld]

How to pass two styles for the styles object and to newprops, means I want to give both background color as one style and for text color i want to use as text style separately..at that time how can i pass

[ytb.addict]

Bahaut hi ganda explaination
Lon'j'er Video Playlist

[soneshengg]

For let _styles, do we really need a spread operator ? Can it not just be _styles = styles.default and _styles= styles.disable ?

[nooruddinraotiwala]

Where is the style wrapper class declared ?