Render props
Imagine implementing a feature that is composed of several smaller components, like what you've been working on in this chapter. The MyFeature
component depends on ArticleList
and AddArticle
. Now, imagine using MyFeature
in different parts of your application where it makes sense to use a different implementation of ArticleList
or AddArticle
. The fundamental challenge is substituting one component for another.
Render props are a nice way to address this challenge. The idea is that you pass a property to your component whose value is a function that returns a component to render. This way, instead of having the feature component directly depend on its child components, you can configure them as you like; they pass them in as render prop values.
Note
Render props aren't a React 16 feature. It's a technique whose popularity increase coincided with the release of React 16. It's an officially recognized way to deal with dependency and substitution...