React Design Patterns and Best Practices - Second Edition

Derivables

Every time we can compute the final value from the props, we should not store any data into the state.

So, for example, if we receive the currency and the price from the props, and we always show them together, we may think that it would be better to store it in the state and use the state value inside the render as follows:

  class Price extends React.Component {     constructor(props) {       super(props);         this.state = {         price: `${props.currency}${props.value}`       };    }        render() {       return <div>{this.state.price}</div>;    }   }

This would work if we create it like this in the parent component:

  <Price currency="$" value="100" />

The problem is that, if the currency or the value changes during the lifetime of the Price component, the state ...