I'm trying to learn React from scratch and having a deep knowledge of concepts !
Today I was searching about HOC, Render Props and the differences between the two. I've checked render times for both. I wrote a console.log('rendered') into render to check render times in browser console.
HOC: When I used HOC to write an usable ponent, I saw after each changes on props I've render for HOC and ponent that used HOC.
Render Prop: In this case I've changed the props, but only wrapper ponent has rendered. because with render props we load only one ponent and inject codes to use that ponent feature !
So, Is it a benefit to use Render Props instead HOC ponents? Or HOC ponents are usable and powerful yet?
Thanks
I'm trying to learn React from scratch and having a deep knowledge of concepts !
Today I was searching about HOC, Render Props and the differences between the two. I've checked render times for both. I wrote a console.log('rendered') into render to check render times in browser console.
HOC: When I used HOC to write an usable ponent, I saw after each changes on props I've render for HOC and ponent that used HOC.
Render Prop: In this case I've changed the props, but only wrapper ponent has rendered. because with render props we load only one ponent and inject codes to use that ponent feature !
So, Is it a benefit to use Render Props instead HOC ponents? Or HOC ponents are usable and powerful yet?
Thanks
Share Improve this question edited Jun 15, 2020 at 12:20 Dupocas 21.3k7 gold badges41 silver badges57 bronze badges asked Nov 14, 2019 at 11:29 MohammadMohammad 2332 silver badges10 bronze badges1 Answer
Reset to default 14HOC, Render Props and now hooks all serve to the same purpose: Share stateful logic between ponents. There is actually no way to tell which one is better or worst. All depends on your use case.
High Order Components are posable. It's easy to nest them
const withProps = (Component) => connect(mapState, mapDispatch)(<Component foo='bar' />)
Children as a function is a bad pattern for posability, nesting looks a lot like a callback hell cause they need to be executed inside an jsx block
const Component = () => {
return (
<Consumer>
{
props => (
<ThemeConsumer>
{
theme => <Child {...props} {...theme} />
}
</ThemeConsumer>
)
}
</Consumer>
)
}
On the other hand, render props it's easy to set up, have less boilerplate and in most cases are easier to reason about.
Hooks bring the best of both worlds
hooks are posable, can be easily nested, and are simple to reason about cause after all they're just plain old functions
const useConfig = () =>{
const customProps = useCustomProps()
const theme = useContext(ThemeContext)
return [customProps, theme]
}
const Component = () => {
const [props, theme] = useConfig()
}
But again: There is no such thing as the best pattern. It's just a matter of where are you going to use it.