Remove currying and add withHandlers helper
Remove currying
Currying wasn't really buying us much, and it was adding an extra layer of confusion for people new to the library. Helpers are now functions that return higher-order components
const EnhancedComponent = helper(a, b, c)(BaseComponent)
which means they retain their composability.
The following form will no longer work:
// No longer works!
const EnhancedComponent = helper(a, b, c, BaseComponent)
To aid in the transition, helpers will print a warning to the console if you call them with too many arguments.
withHandlers
withHandlers(
handlerCreators: {
[handlerName: string]: (props: Object) => Function
}
): HigherOrderComponent
Takes an object map of handler creators. These are higher-order functions that accept a set of props and return a function handler:
This allows the handler to access the current props via closure, without needing to change its signature.
Handlers are passed to the base component as immutable props, whose identities are preserved across renders. This avoids a common pitfall where functional components create handlers inside the body of the function, which results in a new handler on every render and breaks downstream shouldComponentUpdate()
optimizations that rely on prop equality.
Usage example:
const enhanceForm = compose(
withState('value', 'updateValue', ''),
withHandlers({
onChange: props => event => {
props.updateValue(event.target.value)
},
onSubmit: props => event => {
event.preventDefault()
submitForm(props.value)
}
})
)
const Form = enhanceForm(
({ value, onChange, onSubmit }) =>
<form onSubmit={onSubmit}>
<label>Value
<input type="text" value={value} onChange={onChange} />
</label>
</form>
)
This replaces withAttachedProps, which has been removed.