Having written a simple test app I’m continuing to use it to try and develop my React knowledge 🙂 One aspect that I did find a little annoying was the amount of code I seemed to repeat. I kept thinking that I should have a base class and simply inherit from it – a pattern I have used a lot in other languages, but this is React and nothing I had seen suggested that pattern.

Enter the Mixin

A react mixin is a simple idea, a block of code that is common to one or more components. After looking at them I found it was possible to extract a lot of common functionality, resulting in this code.

var AppointmentMixin = { componentDidMount: function() { this.props.updateInterval(this.props.id, this.totalTime()); }, setAdditional: function(ev) { this.state.additional = parseInt(ev.target.value); this.props.updateInterval(this.props.id, this.totalTime()); }, totalTime: function() { return this.state.duration + this.state.additional; }, finishTime: function() { return this.props.start.clone().add(this.totalTime(), "minutes"); }, };

There is nothing in the above code that is specific to a component, it’s all plain generic code. To use it in a component you need to add a ‘mixins’ line and remove the old code. This now gives me a component that looks like this.

var Hair = React.createClass({ mixins: [ AppointmentMixin], getInitialState: function() { return {duration: 90, additional: 0} }, render: function() { return (

) } });

This is much closer to what I wanted.

Uh oh…

While looking around for information on mixins I cam across this line repeatedly.

Unfortunately, we will not launch any mixin support for ES6 classes in React. That would defeat the purpose of only using idiomatic JavaScript concepts.

This looked as if support would be coming, but then I found this post and also this.

Higher Order Component – huh?

So looking at some posts about the concept helped me get a better understanding of what it’s trying to do, I decided to try and change my example to use it. Sadly it didn’t work out as I’ve been unable to get the higher order component solution working in a manner akin to a mixin. It’s not so much a replacement but a totally different approach that requires things be done differently.

However, always keen to learn, I rewrote things and ended up with this.

function TimedAppointment(duration, title) { const Appointment = React.createClass({ getInitialState: function() { return {duration: duration, additional: 0, title: title} }, componentDidMount() { this.props.updateInterval(this.props.id, this.totalTime()); }, setAdditional(ev) { this.state.additional = parseInt(ev.target.value); this.props.updateInterval(this.props.id, this.totalTime()); }, totalTime() { return this.state.duration + this.state.additional; }, finishTime() { return this.props.start.clone().add(this.totalTime(), "minutes"); }, render() { return (

) } }); return Appointment; }; var Hair = TimedAppointment(90, "Hair Appointment"); var Nails = TimedAppointment(30, "Manicure");

This is much neater and certainly gives me a single set of reusable code – no mixins required. It’s possibly far closer to where it should be and is still within my limited comfort zone of understandability.

If anyone cares to point out where I could have gone or what I could have done differently, please let me know 🙂

Summary

As time goes on I’m sure that the newer formats of javascript will become more of a requirement and so mixins probably won’t be much use going forward.