Category: A Short Note

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (Higher-order Components vs Render Props In React JS).

In this note series, we will about Higher-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 we decide to use one over the other?

The reason we have these two approaches is that React used ES6 class for building React components to manage the 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 like 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, 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 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 use 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 looks cleaner.

HOC or Render props

From this, we can say render props solves the issues posed by HOC, and 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 like 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 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 to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

You can find Other articles of CoolmonkTechie as below link :

• ReactJS Note
• ReactJS Articles
• CoolMonkTechie Home Page

You can also follow official website and tutorials of React as below links :

• React Official Website

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

Thanks again Reading. HAPPY READING !!???