React calculations in render vs in lifecycle methods
<p>I'm trying to understand something about react and would like to get thoughts on the better way to do it.</p>

<p>Basically, I want to do some transformations/calculations on incoming props. I have limited event based state changes currently, but that may change in the future. Basically, is it better to do these calculations in render, or in componentWillMount and componentWillReceiveProps and set state?</p>

<p>in render example:</p>

<pre><code>render() {
  var url = this.getUrl() // get url transforms some props into a valid url
  var something = this.getSomething() // etc etc

  return &lt;a href={url}&gt;{something}&lt;/a&gt;
}
</code></pre>

<p>outside of render:</p>

<pre><code>componentWillMount() {
  this._checkAndSetUrl(this.getUrl(this.props.data));
},
componentWillReceiveProps(nextProps) {
  const currentGivenUrl = this._getUrl(this.props.data)
  const nextGivenUrl = this._getUrl(nextProps.data)

  if (currentGivenUrl !== nextGivenUrl) {
    this._checkAndSetUrl(nextGivenUrl);
  }
},
_checkAndSetUrl(url) {
  // check validity and do some stuff to url
  url = "new url" 
  something = this.getSomething()

  this.setState({url: url, something: something})
}
</code></pre>

<p>My thinking is the second way is better because you don't do the calculations on every render, only when things are changed. What's the accepted way to do this?</p>