React.js : reusable components vs mixin's utility functions

Question

Let's say my react.js app is going to display dates and I would like to apply the format that is set in the client's browser/OS. There are multiple components that show dates and I can use a couple of ways to share the code between them.

1.Re-usable React.js components like:

var React = require('react');

module.exports = React.createClass({
    render : function(){
        if(this.props.value === null || this.props.value===undefined)
            return false;
        var formattedValue =  new Date(this.props.value).toLocaleDateString();
        return(
            <span>
                {formattedValue}
            </span>
        );
    }
}); 

and then use them like:

var DateFormatter = require('./../formatters/Date');
<DateFormatter value={invoice.date} />

2.Utility functions shared via React.js mixins, ie:

module.exports = {
    renderDate : function(dateValue){
        if(dateValue === null || dateValue===undefined)
            return false;
        var formattedValue =  new Date(dateValue).toLocaleDateString();
        return(
            <span>
                {formattedValue}
            </span>
        );
    }
} 

and then just add the mixin to a component and use something like

{this.renderDate(invoice.date)}

To me it seems that there is no much difference between these 2 approaches for now. But I would love to hear the opinion of community about pros and cons of each solution. TIA!

Answer 1

One aspect is performance: if you write a component to display the date like you did above, you can mark it with PureRenderMixin , as the rendered output relies only on the the props. This might speed up the rendering a bit, as the formatting only needs to be done when the date changes.

From clean code point of view, I would either write a component or use a non-react utility function that just formats the date to a string - no need to couple the date formatting and dom elements. Something like:

function formatDate(dateValue){
    if(dateValue == null)
        return ""
    return new Date(dateValue).toLocaleDateString()
}