Why say using HOC's otpions in the recompose pattern is not very reusable?

From the docs https://www.apollographql.com/docs/react/recipes/recompose.html#other, it says

Normaly if you need to add sideffect to mutate function, you would manage it in HOC’s options ->props part by doing something like { mutate: () => mutate().then(sideEffectHandler) }. But that is not very reusable. Using recompose’s withHandlers() you can compose same prop manipulation in any count of components.

then i follow the given link to a blog post, it demonstrates the use case when dealing with mutation.

export default compose(
  injectIntl,
  graphql(mutation),
  withHandlers({
    toggleMutation: ({ mutate, _id, intl }: { mutate: Function, _id: string, intl: Object }): Function => {
      return (): Promise<any> => {
        return mutate({
            variables: {
              someId: _id,
            },
          }).then((data: string) => {
          console.log(data, 'Return value');
        }).catch((e: Object) => {
          console.error(e, 'Error');
        });
      };
    }
  })
)(MutationButton);

and i found the syntax is quite cumbersome. Why don’t just

export default compose(
  injectIntl,
  graphql(mutation, {
    props: ({ mutate }) => ({
      toggleMutation: (_id: string, intl: Object) => mutate!({
        variables: { id, provider },
      }).then((data: string) => {
        console.log(data, 'Return value');
      }).catch((e: Object) => {
        console.error(e, 'Error');
      });
    }),
  }),

)(MutationButton);

Could the docs elaborate more on the benefit of using withHandlers()?

[ShockiTV]

Yes, just decoupling. Examples, well, there could be 2 UI components calling same mutation, but you want to track 2 different Google Analytics actions. So you reuse the graphql mutation (it could have options other than props so you dont wanna copypaste 20 lines of vaariables and other computation parts raw into compose, but prepare some withClickMutation HoC) and you can prepare separate HoC which you use like this withGASideffect(“clicked first button”). And for 2nd component you can still use withClickMutation HoC, but this time compose it with withGASideffect(“clicked second button”)

[goldenbearkin]

awesome! thanks @ShockiTV