Render Props vs HOC?

Question

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 component, I saw after each changes on props I've render for HOC and component that used HOC.

Render Prop: In this case I've changed the props, but only wrapper component has rendered. because with render props we load only one component and inject codes to use that component feature !

So, Is it a benefit to use Render Props instead HOC components? Or HOC components are usable and powerful yet?

Thanks

Answer 1

HOC, Render Props and now hooks all serve to the same purpose: Share stateful logic between components. There is actually no way to tell which one is better or worst. All depends on your use case.

---

High Order Components are composable. It's easy to nest them

const withProps = (Component) => connect(mapState, mapDispatch)(<Component foo='bar' />)

Children as a function is a bad pattern for composability, 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 composable, 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.