Skip to content
This repository has been archived by the owner on Sep 10, 2022. It is now read-only.

Remove currying and add withHandlers helper

Compare
Choose a tag to compare
@acdlite acdlite released this 11 Apr 18:07
· 344 commits to master since this release

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.