Write a Higher Order Component from Scratch

Share this video with your friends

Send Tweet

Learn the proper patterns for writing a higher order component from scratch.

Austin Witherow
Austin Witherow
~ 8 years ago

Why should I be writing 'high order components'? I do not understand what they do for me, it seems like a lot of abstraction with no clear benefit.

Jason Kendall
Jason Kendall
~ 8 years ago

Austin you nailed it, this was my point. There's actually a lot of benefits from higher order components, but it's not being explained. That's where some type of small intro to these videos would not only be extremely beneficial but in some cases crucial to understand the material. I understand that egghead tries this 'bite size' approach of training which is fine, it's great for breaking up the material but that's not a replacement method of teaching if you don't have some context with a beginning, middle and end.

Tim Kindberg
Tim Kindberg(instructor)
~ 8 years ago

I think the remaining lessons in the course help answer your question through various examples. I'm optimistic that by the end of the course you'll have a clear understanding of why you might use HOCs. This particular lesson was added to the beginning to demystifying what HOCs do "under the hood". I could move it later in the course after learners have gotten some initial exposure to some several real world examples.

Austin Witherow
Austin Witherow
~ 8 years ago

Alright Tim, I trust you and I will give it a go! A short introduction is always useful in any case, for my taste. But opinions opinions.

Thanks for the quick reply :thumbsup:

Tim Kindberg
Tim Kindberg(instructor)
~ 8 years ago

It's good feedback. Thank you.

Nick Janssen
Nick Janssen
~ 7 years ago

Instead of neverRender you mean neverUpdate, right?

Andrea Di Marco
Andrea Di Marco
~ 7 years ago

Cool... just a bit dry 😬

jorge martinez
jorge martinez
~ 6 years ago

which videos on egghead r are prerequisites? thx

Damian Joniec
Damian Joniec
~ 5 years ago

why do you write BaseComponents in curly brackets without parentheses?

const neverRender = {BaseComponent} => class extends Component { shouldComponentUpdate() { return false; } render() { return <BaseComponent {...this.props} />; } };

...

const User2 = neverRender(User)