A Short Note – Higher-order Components vs Render Props In React JS

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series.

In this note series, We will about High-order components vs Render Props in React JS . Higher-order components (HOC) and render props are two ways to build cross cutting code in React JS. How do you decide to use one over the other?

The reason we have these two approaches is that React decided to use ES6 class for building React components to manage state. Before that, to share cross-cutting concerns for components React.createClass mixins was the way to handle that. However, class does not support mixins and a new way had to be developed.

So Let’s begin.

Higher-order Components

Soon HOC evolved into the picture to support code reuse. Essentially these are similar to the decorator pattern, a function that takes a component as the first parameter and returns a new component. This is where we apply our cross-cutting functionality.

Example of higher-order component:

function withExample(Component) {
  return function(props) {
    // cross cutting logic added here
    return <Component {...props} />;
  };
}

What does HOC solve?

  • Importantly they provided a way to reuse code when using ES6 classes.
  • No longer have method name clashing if two HOC implement the same one.
  • It is easy to make small reusable units of code, thereby supporting the single responsibility principle.
  • Apply multiple HOCs to one component by composing them. The readability can be improve using a compose function like in Recompose.

We can start to see similarities in the downsides for both mixins and HOC:

  • There is still an indirection issue, however, not about which HOC is changing the state but which one is providing a certain prop.
  • It is possible two HOC could be using the same prop meaning one would overwrite the other silently.

Higher-order components come with new problems:

  • Boilerplate code like setting the displayName with the HOC function name e.g. (withHOC(Component)) to help with debugging.
  • Ensure all relevant props are passed through to the component.
  • Hoist static methods from the wrapped component.
  • It is easy to compose several HOCs together and then this creates a deeply nested tree making it difficult to debug.

Render Props

A render prop is where a component’s prop is assigned a function and this is called in the render method of the component. Calling the function can return a React element or component to render.

Example of using a render prop:

render(){
  <FetchData render={(data) => {
    return <p>{data}</p>
  }} />
}

What do render props solve?

  • Reuse code across components when using ES6 classes.
  • The lowest level of indirection – it’s clear which component is called and the state is isolated.
  • No naming collision issues for props, state and class methods.
  • No need to deal with boiler code and hoisting static methods.

Minor problems:

  • Caution using shouldComponentUpdate as the render prop might close over data it is unaware of.
  • There could also be minor memory issues when defining a closure for every render. But be sure to measure first before making performance changes as it might not be an issue for our app.
  • Another small annoyance is the render props callback is not so neat in JSX as it needs to be wrapped in an expression. Rendering the result of an HOC does look cleaner.

HOC or Render props

From this, we can generally say render props solves the issues posed by HOC, and in my opinion, it should be our go-to pattern for creating cross-cutting logic. Render props are easier to set up, with less boiler code and no need to hoist static methods, as they are similar to standard components. They are also more predictable as fewer things can go wrong with updating state and passing props through.

However, we find HOC better to compose over render props, especially when many cross-cutting concerns are applied to a component. Many nested render prop components will look similar to “callback hell”. It’s straightforward to create small HOC units and compose them together to build a feature-rich component. Recompose is a great example and can be useful to apply to solving our next challenge.

Just remember to use the tool that best helps us solve our problem and don’t let the Hype Driven Development pressure us to do otherwise. Render props and HOC are equally great React patterns.

Conclusion

In this note series, We understood about High-order components vs Render Props in React JS. We also discussed about How do we decide to use one over the other in ReactJS.

Thanks for reading ! I hope you enjoyed and learned about High-order components vs Render Props concept in React JS. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s