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…

6 Simple ways to speed up your react native app.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. So if you haven’t read it yet, maybe its the right time to do so.Here are few things you can do if you are using react or react native, to maintain higher FPS.1. Use PureComponent or in react don’t have state, they just render your component based on the data passed via props. It re-renders only if props change. 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. First example implements the shouldComponentUpdate logic for you already. The second example gives you a bit more control. You can maintain state in component and stop re-rendering if the state doesn’t change. Like thisclass MyComponent extends React.Component { nextState) { if(this.state.isLoading === nextState. isLoading) { return false; } return true }}2. Use key attribute on list itemsList is the most commonly used thing in any application. If you don’t specify unique key for every list item, react will re-render every item when…

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