Render Prop Pragmatism

Render Props are a React pattern for component composition that can solve essentially the same challenges as higher-order components. While higher-order components are based on higher-order functions, which wrap other functions and can modify arguments, render props are based on callback functions. In many ways, render props are an inversion of the higher-order component pattern, flipping it inside out to inject props inside your component rather than outside. This simplifies many use cases, but it's also easy to misuse - resulting in a tangled pyramid of callback functions that can be difficult to maintain.

When Props Collide

First, though - let's talk about the advantages render props have over higher-order components. The biggest, in my mind, is their more explicit nature versus the implicit pass-through nature of higher-order components. This is especially evident if you're using a strict type system like TypeScript. Consider the overly-simplified component below:


import React, {Component} from 'react'
import {TouchableOpacity} from 'react-native'
import {connect} from 'react-redux'

interface Item {
  id: string
}

interface Props {
  items: Item[]
  isAuthenticated: boolean
}

const mapState = state => ({isAuthenticated: state.user.isAuthenticated})

export class Collection extends Component<Props> {
  componentDidMount () {
    const {isAuthenticated} = this.props

    if (!isAuthenticated) {
      console.log('Client-side redirect: engage!')
    }
  }

  render () {
    const {isAuthenticated, items} = this.props

    if (isAuthenticated) {
      return items.map(this.renderItem)
    } else {
      return null
    }
  }

  private renderItem = (item: Item) => {
    return (
      <TouchableOpacity onPress={this.handlePress(item)}>
        {item}
      </TouchableOpacity>
    )
  }

  private handlePress = (item: Item) => () => {
    console.log('Client-side route: engage!', item)
  }
}

export default connect(mapState)(Collection)

If I want to bring in react-navigation, I need to use the withNavigation higher-order component:

import {NavigationInjectedProps, withNavigation} from 'react-navigation'

interface Props extends NavigationInjectedProps {
  items: Item[]
  isAuthenticated: boolean
}

// ...

  componentDidMount () {
    const {isAuthenticated, navigation} = this.props

    if (!isAuthenticated) {
      navigation.navigate('Login')
    }
  }

// ...

  private handlePress = (item: Item) => () => {
    this.props.navigation.navigate('Item', {item})
  }

// ...

This makes my Props interface implicitly grow with whatever is in NavigationInjectedProps, and TypeScript must work to ensure that each interface is compatible with each other. When your component is simple like this one, not much of a challenge is presented. Other wrappers are more complex, however. The higher-order components included with react-router and formik both inject a variety of props. The react-apollo higher-order component injects a single prop that is very complex and relies on a generic type argument.

All of these wrapper components and their props must be merged not just into a single often monolithic Props interface to be used with your inner component, but also each intermediate step along the way must be checked by the type checker for compatibility. When the type checker can’t unify types on an intermediate step, the error message is often obnoxiously inscrutable:

Scope Restraint

Render props sidestep this problem by not attempting to intersect the props at all, rather providing a constrained set of local props to a callback function. Consider a slightly different example:

import React, {Component} from 'react'

import {Collection as CollectionType} from '../../../data/CollectionData'
import CollectionQuery from '../../data/CollectionQuery'

interface Props {}

export default class Screen extends Component<Props> {
  render () {
    return (
      <CollectionQuery render={this.renderWithCollections} />
    )
  }

  private renderWithCollections = (collections: CollectionType[]) => {
    return (
      <>
        {/* ... */}
      </>
    )
  }
}

With this approach, rather than injecting the retrieved collections as an outer prop the user receives the prop as a callback, keeping the scope local to the function. This allows your props to more effectively reflect what consumers of the component need to provide in order to use it, and it makes the type checking much easier and more obvious.

How the Render Prop is Made

Here’s how the CollectionQuery component used above is put together:

import React, {Component, ReactNode} from 'react'
import {Query, QueryResult} from 'react-apollo'

import {AllCollections, AllCollectionsData, Collection} from '../../data/CollectionData'

interface Props {
  render (collections: Collection[]): ReactNode
}

export default class CollectionQuery extends Component<Props> {
  render () {
    return (
      <Query<AllCollectionsData> query={AllCollections}>
        {this.renderWithResults}
      </Query>
    )
  }

  private renderWithResults = (results: QueryResult<AllCollectionsData>) => {
    if (results.loading || !results.data) {
      return null
    }

    const {render} = this.props
    const {data: {allCollections: {nodes: collections}}} = results

    return render(collections)
  }
}

The render (collections: Collection[]): ReactNode expression defines a render prop that takes a callback expecting the retrieved collections, and returning something renderable.

One unique feature of render props, however, is that you don’t have to rely on a single children prop to define a renderable region in your component. You can use multiple render props named whatever you like, giving your consumer flexibility to render a variety of things in a variety of places within your component.

Unicorns & Rainbows Forever!

Hooray! We’re saved! Right? Well, not quite. With the advantages of callback functions come the pitfalls, and you can easily find yourself tangled up in a pyramid of nested inline functions:

  render () {
    return (
      <Query<AllCollectionsData> query={AllCollections}>
        {(results: QueryResult<AllCollectionsData>) => {
          if (results.loading || !results.data) {
            return null
          }

          const {data: {allCollections: {nodes: collections}}} = results

          return (
            <Query<OtherQueryData> query={OtherQuery}>
              {(otherResults: QueryResult<OtherData>) => {
                if (otherResults.loading || !otherResults.data) {
                  return null
                }

                const {data: {allCollections: {nodes: others}}} = otherResults

                return (
                  <Formik
                    render={(formik: FormikProps<Values>) => {
                      return (
                        <>
                          <form>
                            {/* ... */}
                          </form>
                          <TouchableOpacity onPress={() => doSomething(collections, others)}>
                            <Text>Do Something</Text>
                          </TouchableOpacity>
                        </>
                      )
                    }}
                  />
                )
              }}
            </Query>
          )
        }}
      </Query>
    )
  }

To fight this, I embrace a few strategies to keep things under control:

Use class methods to logically organize callbacks
Break components up into small, single-purpose pieces wherever practical
Abstract repeated structures into reusable pieces

Ethical Class-Based Components

Classes are often regarded with suspicion in JavaScript because they are a rather indirect abstraction – they hide how prototype inheritance in JavaScript truly works in a way that can cause unexpected and confusing behavior.

If you avoid implicit state and keep things practically pure, class methods can be a clean and obvious way to organize callback functions for things like render props and event handlers.

import { QueryResult } from "react-apollo";
import { TouchableOpacity } from "react-native-gesture-handler";

export default class MyComponent extends Component {
  render () {
    return (
      <Query<MyData> query={MyQuery}>
        {this.renderWithData}
      </Query>
    )
  }

  private renderWithData = (results: QueryResult<MyData>) => {
    if (results.loading || !results.data) {
      return null
    }

    const {render} = this.props
    const {data: {myData: {nodes: myData}}} = results

    return myData.map(this.renderData)
  }

  private renderData = (data: Data) => {
    return (
      <TouchableOpacity key={`data:${data.id}`} onPress={this.handlePress(data.id)}>
        {data.title}
      </TouchableOpacity>
    )
  }

  private handlePress = (id: string) => () => {
    console.log('Tada!')
  }
}

The event handler takes the piece of data from the Query and passes it into a curried event handler. Since the function isn’t defined inside the render function, it’s not re-created on each render and the JavaScript engine can build up a more effective optimization profile. This is a micro-optimization, however. More importantly, your code is clean and easy to read without increasing levels of nesting.

This is only usable in small bites, however. If you pack a single component with a dozen render functions and just as many event handlers, you’ll find yourself or your team scratching your heads trying to pick apart all the things that are happening in one place. Breaking components into smaller pieces helps with readability and maintainability.

Abstracting reusable routines into render-prop components as I did above with ComponentQuery helps a lot to reduce boilerplate and allow you to take advantage of your effort in more places, without dealing with growing Props types and convoluted type errors.

Inversion of Control

Another important aspect of render props is the way that they allow for an inversion of control from the callee to the caller. Rather than giving a component an intricate set of configuration props to describe all of the ways that you anticipate the user would want the component to be rendered, you can give the user the power to render whatever they want using the callback function.

Say you have a CoolWidget that has a left and a right region, and you want to allow the user to render their own icon in each spot.

export default class MyComponent extends Component {
  render () {
    return (
      <CoolWidget
        left={{icon: 'left-arrow'}}
        right={{icon: 'right-arrow'}}
      />
    )
  }
}

What if the user wants to render their own icon that you don’t support in your library? Or, what if your user wants to render something else entirely? You can either provide an ever-growing set of props to describe an ever-growing set of internal functionality based on them, or you can use callback functions to render whatever the caller gives you.

export default class MyComponent extends Component {
  render () {
    return (
      <CoolWidget
        left={this.renderLeft}
        right={this.renderRight}
      />
    )
  }
}

It doesn’t matter what this.renderLeft and this.renderRight are in this case – because they could be anything! As long as you constrain your left and right props to return ReactNode, then you know you’ll be able to render it in the right spot.

The Right Tool for the Job

Render props aren’t a cure-all for tangled higher-order components, and they come with their own whole new set of pitfalls. At their best, however, they can flip the wrapper-component pattern inside-out, making it easier to keep track of props without having to check interlocking sets of intermediate props along a complicated pipeline of wrapping components.

Sometimes, however, higher-order components really are the best tool for the job. Redux’s connect function remains an outstanding way to attach global state to your components in a controlled way. The withApollo wrapper is still great for quickly injecting a GraphQL client that you can anywhere inside your component. The more complex your component composition chain is, however, the more opportunities you encounter for confusing prop issues.

As in anything, make sure you’re taking a balanced approach and considering whether you’re using the right tool for the problem you’re solving. With some care, render props can be a well-controlled way to compose components in an obvious way, while providing valuable inversion of control and allowing for easier type checking!