Everyone had something to say about React Hooks when they released, but developers still continued to use render props. However, developers can stop using render props because of custom Hooks, and in this article, we’ll learn how to do that.

But, note that render props haven’t and won’t completely die off, but they have evolved to provide different functionalities.

To run the examples in this post, use Create React App v4.0.3 and React v17.0.3 or above.

What are render props?

Render props are an advanced pattern for sharing logic across components. A component, usually termed as a container component, can delegate how a UI looks to other presentation components and only implement business logic.

This means we can implement cross-cutting concerns as components by using render prop patterns.

The overall purposes of using render props are:

Are render props bad?

Using render props comes with their own issues. Some of these issues appear only when we dig deeper or when we scale a project.

Render props’ issues with wrappers

To increase the DRYness of our codebase, we often implement many small, granular components so each component deals with a single concern. However, this often leaves developers with many wrapper components nested deeply inside one another.

If we increase the number of wrapper components, the component size and complexity increase while the reusability of a wrapper component might decrease. :

Render props’ issues with binding this

Since the wrapper components deal with state or lifecycle methods, they use class components. With class components, we must bind this properly, otherwise, we risk losing the this context inside functions. The syntax for binding all methods looks ugly and is often a burden for developers.

Render props’ issues with classes

Classes come with a good amount of boilerplate code, which is awful for us to write every time we convert a functional component into a class component.

Turns out, classes are hard to optimize by our build tools, as well. This incurs a double penalty because it neither leads to a good developer experience nor a good user experience. The React team is even thinking of moving class components support to a separate package in the future.

What are the problems of using render props with pure components?

Using a render prop can negate the advantage that comes from using PureComponent if we create a function assigned inside the render method.

This is because the shallow prop comparison always returns false for new props, and, in this case, each render generates a new value for the render prop. Refer to the .

Many of these problems are not entirely the fault of the render props pattern, though. Until now, React did not provide a way of using state or lifecycle methods without involving classes. That’s why we must use classes in container components for implementing the render props pattern.

However, all of that changes with the introduction of the React Hooks API. React Hooks lets us use state and lifecycle Hooks inside functional components with only a few lines of code.

What’s better, we can implement our own custom Hooks. These Hooks give us an easy and powerful primitive for sharing logic across components. That means we don’t need classes or a render props pattern to share code between components.

Before jumping into that, let’s first get a good look at how React Hooks can be used.

What are React Hooks?

As a short description, . However, the best way to learn more about something is by using it.

So, to use React Hooks, we’ll build a component that shows information by default and lets us update that information by clicking a button.