Why Mixins are anti-patterns

With a Mixin pattern, you mix in a certain behavior with your React components. You kind of inject a behavior for free, and you can reuse the same Mixin in different components. This all sounds great, but it isn't – and you will easily find articles on why. Here, I want to show you this anti-pattern by example.

Mixin example

Instead of shouting Mixins are harmful, let's create a component that is using them and look at what the issues are. Mixins are deprecated, so the first step is finding a way to use them. It turns out that they still live in a legacy way of creating React class components. Previously, instead of ES6 classes, there was a special function called createReactClass...