Low performance in React Native with Redux

Question

I have discovered some issues with performance in my react native app. It seems to be caused by react-redux bundle.

As you can see in the video

there is a significant delay between action dispatching and view rendering. On real devices it looks even worse. There are no API calls in this example. Only simple actions dispatching and state changes. On other hand Facebook Flux implementation and simple call of setState work much more faster.

Any ideas how to improve the app performance?

I am using react: v15.2.1, react-native: v0.29.2, react-redux: v4.4.5,

View

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import {Map} from 'immutable';

import * as testActions from '../reducers/test/testActions';
import {Actions} from 'react-native-router-flux';

const actions = [
  testActions
];

function mapStateToProps(state) {
  return {
      ...state
  };
}

function mapDispatchToProps(dispatch) {
  const creators = Map()
          .merge(...actions)
          .filter(value => typeof value === 'function')
          .toObject();

  return {
    actions: bindActionCreators(creators, dispatch),
    dispatch
  };
}

........

<View style={styles.box}>
    {PRICE_FILTERS.map(filter =>{
        let price_cont_style = {};
        let price_text_style = {};
        if (filter.id == PRICE_FILTERS[3].id){
            price_cont_style.marginRight = 0;
        }
        if (filter.id == this.props.test.price){
            price_cont_style.backgroundColor = 'black';
            price_text_style.color = 'white';
        }
        return(
        <TouchableOpacity 
            key={filter.id} 
            style={[styles.price_cont, price_cont_style]} 
            onPress={()=>this.props.actions.setPrice(filter.id)}>
        <Text 
            style={[styles.price_text, price_text_style]}>
            {filter.label}
        </Text>
        </TouchableOpacity>
        );
    })}
</View>

......

export default connect(mapStateToProps, mapDispatchToProps)(PerformanceTest);

Actions

const {
    TEST_SET_PRICE,
} = require('../../lib/constants').default;

export function setPrice(filter) {
  return {
    type: TEST_SET_PRICE,
    payload: filter
  };
}

Reducer

const {
    TEST_SET_PRICE,
} = require('../../lib/constants').default;
const InitialState = require('./testInitialState').default;
export default function authReducer(state = InitialState, action) {
  switch (action.type) {

  case TEST_SET_PRICE:
        if (state.price!=action.payload){
            return {price:action.payload}
        } else{
            return state;
        }

    }
    return state;
}

Community · Accepted Answer · 2017-05-23 12:24:53Z

2

As it turned out the cause of this issue is all components from navigation chain are staying unmounted and get rerendered behind of the current scene

See more details here Possible navigation issue in React Native/Redux app

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Aug 2, 2016 at 19:02

alexsh

2412 silver badges6 bronze badges

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

Comments

Konstantin Kuznetsov · Accepted Answer · 2016-07-26 08:17:44Z

1

I've noticed that in your video, you have redux-logger enabled, but flux and setState do not log into console.

It might be console.log that causes this performance drop. There is a known issue, here is an explanation.

Try to turn off console logging and see how it affects performance.

answered Jul 26, 2016 at 8:17

Konstantin Kuznetsov

9039 silver badges15 bronze badges

1 Comment

alexsh Over a year ago

yes, i knew about this issue with redux-logger and tried to disable redux-logger and delete all console.log commands. It did not help. Same delays were present. In the video I left the logger and "RENDERING" message as a proof that the only action was dispatching and the only rendering performed when a button was pressed.

Collectives™ on Stack Overflow

Low performance in React Native with Redux

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related