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.