6 Simple ways to speed up your react native app. – codeburst

6 Simple ways to speed up your #reactnative app.  #redux

  • shouldComponentUpdate life-cycle method is used in regular non pure React Component to cancel the re-render by returning false in certain scenarios.Following two code samples do the same thing.class MyComponent extends React.PureComponent { //}class MyComponent extends React.Component { // nextState) { if(this.props.firstProp === nextProps.
  • firstProp this.props.secondProp === nextProps.secondProp) { return false; } return true } //}Both of the above examples can help you save some wasted renders.
  • Having a unique key on every list item, saves react re-rendering it again.class MyComponent extends React.PureComponent { render() { return this.props.data.map((item, i) = { return Text key={item.id}{item.title}/Text }); }}3.
  • Bind early and don’t create functions inside render.Do thisclass MyComponent extends React.PureComponent { constructor(props) { super(props); this.doWork = this.doWork.bind(this); } doWork() { // doing some work here.
  • // this.props.dispatch…. } render() { return Text onPress={this.doWork}Do Some Work/Text } }Don’t do this inside render.Text onPress={ () = this.doWork() }Do Some Work/TextorText onPress={ this.doWork.bind(this) }Do Some Work/TextBecause render is called very often and every time you do any of the two things above, a new function is created.4.

In my previous article I have talked about hacking event loop for improving performance of your app. Your goal is to retain 60 FPS throughout. All of that applies to react or react native app as well…
Continue reading “6 Simple ways to speed up your react native app. – codeburst”