shouldComponentUpdate

React provides a shouldComponentUpdate method for optimizing components by preventing unnecessary renders.

In Amorphous, this method continues to do the same thing, but is given an extra parameter, prevAppState, so that shouldComponentUpdate can compare differences in appState as well as differences in props or state:

class LengthOutput extends MyAppComponent {

  shouldComponentUpdate(prevProps, prevState, prevAppState) {
    return this.appState.text.length !== prevAppState.text.length;
  }

  render() {
    return (
      <span>
        You have typed {this.appState.text.length} characters
      </span>
    );
  }
}

NOTE: both this.appState and prevAppState are accessible in shouldComponentUpdate.

See React's docs for more information about the shouldComponentUpdate and how to best use it.

results matching ""

    No results matching ""