All 5 Render Props Pattern questions
More in Render Props Pattern
What is a simple real world example of the render props pattern being useful? What is the render props pattern in React? What is a common naming alternative to render props, using children as a function instead? How would you rewrite a render props component as a custom hook instead?
Advertisement
Back to results for “Hooks”
React › Render Props Pattern

What is a downside of the render props pattern that developers should be aware of?

Intermediate

Answer

Nesting several render props components inside each other can create deeply indented, harder to read code, sometimes called callback nesting, similar to the wrapper hell problem seen with higher order components. This is one of the main reasons custom hooks became the preferred way to share logic once they were introduced.
// Deeply nested and harder to read
<MouseTracker render={(mouse) => (
  <WindowSize render={(size) => (
    <ScrollPosition render={(scroll) => (
      <Display mouse={mouse} size={size} scroll={scroll} />
    )} />
  )} />
)} />
Real-world example A team dealing with three levels of nested render props components decides to refactor all three into separate custom hooks instead, flattening the code and making it much easier to read and maintain.

Common follow-ups: How many levels of nesting is generally considered too many before refactoring?;How would combining these three examples into custom hooks actually look in code?

Custom Hooks;Higher-Order Components (HOCs)
All 5 Render Props Pattern questions