Recompose: withHandlers support for additional arguments

[lifehackett]

I'm evaluating this library to see if it will meet our current app's use cases sufficiently. One use case we run into frequently is the need to "preload" a handler with some data.

onClick(id) { 
  return function(event) {
    this.props.handleOnClick(id)
  }
}
...

{someItems.map(item => <button onClick=this.onClick(item.id) />)}

I am thinking I could do this, but want to verify that it won't break some of the optimizations you are doing.

withHandlers({
  onClick: props => args => event {
    props.handleOnClick(args);
  }
})

If not, do you have another suggestion on how to address?

Many thanks.

[istarkov]

There is no need in optimizations in your scenario as this
{someItems.map(item => <button onClick=this.onClick(item.id) />)} is highly unoptimized by it's nature, as every render your button or any other component will rerender as onClick prop has changed.

So you could use just mapProps without withHandlers HOC. It will not break any optimization for your case.

There are few ways to break that unoptimized behavior, the one I prefer is to wrap button with React Component, and to pass id as it prop.

{someItems.map(item => <WrappedButton onClick={this.onClick} id={item.id} />)}

In this case withHandlers is your friend

withHandlers({
  onClick: props => (id, evt) =>  {
    props.handleOnClick(args);
  }
})

[lifehackett]

Thank you for your quick response; that makes sense. If you don't mind, what are your other solutions to "break that unoptimized behavior"?