HOC Idea: keyed components

[dtinth]

At @taskworld, when we write components that communicate with the store upon mounting, we must do it in three different places: componentDidMount, componentWillUnmount, and componentDidUpdate. For example:

var MessagesContainer = React.createClass({
  propTypes: {
    threadId: React.PropTypes.string.isRequired,
  },
  componentDidMount () {
    this.subscription = subscribeToThread(this.props.threadId)
  },
  componentDidUpdate (lastProps) {
    if (lastProps.threadId !== this.props.threadId) {
      if (this.subscription) this.subscription.unsubscribe()
      this.setState(this.getInitialState())
      this.subscription = subscribeToThread(this.props.threadId)
    }
  },
  componentWillUnmount () {
    if (this.subscription) this.subscription.unsubscribe()
  },
  // ...
})

What if a component can reject prop changes?

When the threadId changes, the old component that subscribes to the old thread is simply unmounted, and the new one with the new threadId is mounted in its place.

With that, we don’t need to handle the change in threadId anymore:

var MessagesContainer = React.createClass({
  propTypes: {
    threadId: React.PropTypes.string.isRequired,
  },
  componentDidMount () {
    this.subscription = subscribeToThread(this.props.threadId)
  },
  componentWillUnmount () {
    if (this.subscription) this.subscription.unsubscribe()
  },
  // ...
})

Turns out it is possible with the special key prop in React:

<MessagesContainer threadId={threadId} key={threadId} />

Now the MessagesContainer will be replaced instead of having props sent to it. Just what I want. However, other people reviewing my code may not understand why I need to put a key prop there.

Instead of relying on the users of MessagesContainer to specify the key prop to ensure correct subscribe/unsubscribe behavior, we can simply wrap MessagesContainer in a higher-order component which automatically adds the key to the wrapped component.

This is our implementation of keyed.

function keyed (propsToKey) {
  return function createKeyedComponent (Component) {
    const KeyedComponent = React.createClass({
      render () {
        return <Component {...this.props} key={propsToKey(this.props)} />
      },
    })
    return KeyedComponent
  }
}

And here is how to use it:

export default keyed(props => props.threadId)(Messages)

[acdlite]

Hmm, cool use case, but not sure if it warrants its own helper.

mapProps() gets you most of the way there already:

const keyed = (propsToKey, BaseComponent) =>
  mapProps(
    props => ({
      ...props,
      key: propsToKey(props)
    }),
    BaseComponent
  )

[dtinth]

You’re right. mapProps is awesome.

Thank you!