React: Initiate values in render() or componentDidMount()?

Question

I'm not quite sure where to initiate calculated values in a react component. So this is how I am doing it right now:

render () {
  const { foo } = this.props
  const { bar } = this.state

  const calculatedValue = bar ? foo * bar : foo

  return (
    <div>{calculatedValue}</div>
  )
}

Or should I initiate calculatedValue in componentDidMount()

Answer 1

I think it really depends on how much calculation you are doing. For something as simple as your example above I would usually just do that in render().

Anything above very basic functionality and I would split it out into a separate function such as getFooBarCalcValue().

This way your render method doesn't get too cluttered with things that would otherwise be elsewhere.