Avoid recalculating variable on every render in React

Question

I have a component ParentToDataDisplayingComponent 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 ParentToDataDisplayingComponent.

I am getting some lagging on the components rerendering, where the changing state has not affected this.props.dataOne or this.props.dataTwo - 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. mapPropsToDisplayFormat() is only called after all of the data passed in through the props is available.

I would like to declare the lookup variables once, and avoid re-keyBy()ing on every re-render.

Is there a way to do this inside the ParentToDataDisplayingComponent component?

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 => 

      ... // 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 (
      <div>

        <DataDisplayingComponent
          data={this.hasAllDataLoaded() ? this.mapPropsToDisplayFormat() : "data loading"}
        />
      </div>
    );
  }
}

azium · Accepted Answer · 2016-02-11 07:38:11Z

3

Save the result of all data loading to the component's state.

export default class ParentToDataDisplayingComponent extends Component {

  constructor(props) {
    super(props)
    this.state = { data: "data loading" }
  }    

  componentWillReceiveProps(nextProps) {
    // you can check if incoming props contains the data you need.
    if (!this.state.data.length && nextProps.dataLoaded) {
      this.setState({ data: mapPropsToDisplayFormat() })
    }
  }

  ...

  render() {
    return (
      <div>
        <DataDisplayingComponent
          data={this.state.data}
        />
      </div>
    );
  }
}

I think depending on what exactly you're checking for in props to see if your data has finished loading, you may be able to use shouldComponentUpdate to achieve a similar result without saving local state.

export default class ParentToDataDisplayingComponent extends Component {

shouldComponentUpdate(nextProps) {
  return nextProps.hasData !== this.props.hasData
}    

mapPropsToDisplayFormat() {
  ...

  toReturn = data.props.dataThree
    ? "data loading"
    : this.props.dataThree.map(data => ... )

  return toReturn;
}  

  render() {
    return (
      <div>
        <DataDisplayingComponent
          data={this.mapPropsToDisplayFormat()}
        />
      </div>
    );
  }
}

edited Feb 11, 2016 at 7:38

answered Feb 11, 2016 at 7:13

azium

20.7k8 gold badges63 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Geoff Wright Over a year ago

Thanks Azium, looks like this will do it!

Collectives™ on Stack Overflow

Avoid recalculating variable on every render in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related