title: Avoid recalculating variable on every render in React
body: <p>I have a component <code>ParentToDataDisplayingComponent</code> that is creating a few lookups to help format data for a child component based on data in a redux store accessed by the parent of <code>ParentToDataDisplayingComponent</code>.</p>
  
  <p>I am getting some lagging on the components rerendering, where the changing state has not affected <code>this.props.dataOne</code> or <code>this.props.dataTwo</code> - the data in these lookups is guaranteed the same as last render, but the data in props is not guaranteed to be the available (loaded from the backend) when the component mounts. <code>mapPropsToDisplayFormat()</code> is only called after all of the data passed in through the props is available.</p>
  
  <p>I would like to declare the lookup variables once, and avoid re-<code>keyBy()</code>ing on every re-render. </p>
  
  <p>Is there a way to do this inside the <code>ParentToDataDisplayingComponent</code> component?</p>
  
  <pre><code>export default class ParentToDataDisplayingComponent extends Component {
  
    ...     
  
    mapPropsToDisplayFormat() {
      const lookupOne = _(this.props.dataOne).keyBy('someAttr').value();
      const lookupTwo = _(this.props.dataTwo).keyBy('someAttr').value();
  
      toReturn = this.props.dataThree.map(data =&gt; 
  
        ... // use those lookups to build returnObject
  
      );
  
      return toReturn;
    }
  
    hasAllDataLoaded() {
      const allThere = ... // checks if all data in props is available
      return allThere //true or false
    }
  
    render() {
      return (
        &lt;div&gt;
  
          &lt;DataDisplayingComponent
            data={this.hasAllDataLoaded() ? this.mapPropsToDisplayFormat() : "data loading"}
          /&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>