The problems with mixins

[mattpage]

This article details some of the many flaws inherent to mixins.

Quoting Dan Abramov:

However mixins are fragile for a number of reasons:

The contract between a component and its mixins is implicit. The mixins often rely on certain methods >being defined on the component, but there is no way to see that from the component’s definition.

As you use more mixins in a single component, they begin to clash. For example, if you use something >like StoreMixin(SomeStore) and you add another StoreMixin(OtherStore), React will throw an exception >because your component now has two versions of methods with the same names. Different mixins will >also clash if they define the same state fields.

Mixins tend to add more state to your component whereas you should strive for less. You should read >the excellent Why Flux Component is better than Flux Mixin essay by Andrew Clark on this topic.

Mixins complicate performance optimizations. If you define the shouldComponentUpdate method in >your components (manually or via PureRenderMixin), you might have issues if some of the mixins need >their own shouldComponentUpdate implementations to be taken into account. This can be solved by >adding even more “merging” magic, but is it really the way forward?

Perhaps a compositional example could be provided as an alternative?

[ruiramos]

I've done something like that for a talk that covered (es6) React and Ampersand... let me know if this would be useful: https://github.com/ruiramos/ampersand-talk/blob/master/02-ampersand-react/src/utils/connectToAmpersand.js

It's just a function that wraps your stateful component in a higher order one that gets updated when things change.

[djensen47]

@ruiramos Personally, I think it would be great if you could extract that out into it's own npm module. 👍 😎 Or maybe it's something that the Ampersand team could take on?

This ampersand-react-mixin module hasn't been updated in quite some time and now it seems that the preferred method of doing something like this has changed.

[naugtur]

Hi,

I recently published https://github.com/naugtur/backbone-redux-migrator which is a tool for migrating to redux as in projects I witnessed using mixins to join backbone with react was a dead end.

What's your experience with ampersand? Anyone interested in making my migrator ampersand compatible? Should I look into it?