Set state in life cycle events from props This is a ReactJS component that accepts a date and displays how long ago this date was (5 seconds ago, 3 minutes ago, 5 hours ago, ...) + it uses a setTimeout to automatically update itself when the state.displayDate changes.

What's going on:


On ComponentWillMount: set state.date from props  
Update the state.displayDate with a setTimeout


Is this a good pattern or what are the alternatives?

var MomentAgo = React.createClass({
  propTypes: {
    date: React.PropTypes.string.isRequired
  },
  getInitialState: function() {
    return {
      date: null,
      displayDate: null
    };
  },
  componentWillMount: function (){
    this.setState({ date: this.props.date });
  },
  componentDidMount: function() {
    //with a setTimeout:
    this.setState({ displayDate: date.format('DD MMMM YYYY') });
  },
  render: function() {
    return(&lt;span&gt;{this.state.displayDate}&lt;/span&gt;);    
  }


According to Facebook, setting initial state from props is an anti-pattern.
What happens here is that state is set from props in ComponentWillMount. It would seem that this is thus also the same anti-pattern. Or is this the correct way to do it?
In order to keep to the React pattern and stick to immutability of props simply separate your code to have a parent component which carries out the logic and passes the the date to the child component which can then be displayed in the child's render component. 

It would then look something like this:

var React = require('React');

var MomentDisplay = React.createClass({
    propTypes: {
        date: React.PropTypes.string.isRequired
    },
    render: function() {
        return (
            &lt;span&gt;
                {this.props.displayDate}
            &lt;/span&gt;
        )
    }
});

var MomentAgo = React.createClass({
    getInitialState: function () {
        return {
            date: null,
            displayDate: null
        };
    },
    componentWillMount: function () {
        this.setState({date: this.props.date});
    },
    componentDidMount: function () {
        setTimeout(function(){
            this.setState({displayDate: date.format('DD MMMM YYYY')});
        }, 3000);
    },
    render: function () {
        return (
            &lt;MomentDisplay displayDate={this.state.displayDate} /&gt;
            )
        }
});