title: React: How can I call a method only once in the lifecycle of a component, as soon as data.loading is false
body: <p>I have a React component with a prop 'total' that changes every time the component is updated:</p>
  
  <pre><code>function MyView(props) {
    const total = props.data.loading ? 0 : props.data.total;
    return (
      &lt;p&gt; total &lt;/p&gt;
    );
  }
  </code></pre>
  
  <p>The first time the component mounts the total is say 10. Every time the component is updated because of a prop change the total goes up. </p>
  
  <p>Is there a way I can display the original total (in this example 10)?</p>
  
  <p>I have tried setting it in this.total inside componentDidMount, but props.data.total is not yet available when componentDidMount is called. Same with the constructor. The total only becomes available when props.data.loading is false. </p>