2

I'm building a React Native application (using Redux(Thunk)) where I lately have been facing performance issues that I haven't been able to find a good solution to.

The issue is that the UI/App is freezing/blocked every time I call an action, whether the state changes or not. The app is dealing with accounts data, and the issue started when the account count grew to about 3k accounts. I tested the following:

  1. The time it takes to create the new state in the reducer.
  2. For unnecessary renders.
  3. Any manipulation on the data done in mapStateToProps or elsewhere.

None of the above is taking long or seems to be the issue. The example that I am testing on is a list view of the accounts, with an animated pop up for filtering. When I add a filter in the pop up and saves it (updates the store and closes pop up), I can see the accounts filtering instantly behind the pop up, but the UI/pop up animations is frozen for 2-3 seconds, before closing.

The data is stored with id's as index for accounts and a separate object for filters:

{ 
    accountByIds: { acc1: {...}, acc2: {...} }, 
    filters: {...} 
}

I have been wondering whether using ImmutableJS would help, but as the application have grown rather large and I am not sure this would help, as the issue doesn't seem to be to many renders etc., I haven't changed it.

I am currently updating the store like below:

return {

          ...state,
          filters: {
                ...state.filters,
                newFilter
          }
}

In sum up, it seems that when the store updates, the appropriate renders are called right away, but then the app seems to freeze up for a moment.

If anyone is able to shed any light on this or point me in the right direction I would appreciate it.

Quach90
  • 31
  • 6
  • you need know how many requests are thrown when play this action in particularity, because some browsers, limit request to 6 , once this is dispatched continue and this is cause freeze some effects – Soleil Feb 20 '19 at 22:13
  • @Soleil What is freezing the app is only one action (updating filters) and only caught in one reducer. This is also React Native, so not in a browser, although I don't know how much this will differ. – Quach90 Feb 20 '19 at 22:26
  • because redux thunk could has some server request, and it return promise once it is dispached https://stackoverflow.com/questions/985431/max-parallel-http-connections-in-a-browser – Soleil Feb 20 '19 at 22:39
  • I see, for the particular action that is blocking it is only updating the store with whatever filter the user chooses. So there should not be any external requests or requests to any server for this action. If that is what you mean? – Quach90 Feb 20 '19 at 22:46
  • yes, you need to discard this, after you need check any loop – Soleil Feb 20 '19 at 22:50
  • Ok, as there are no external request and this is React Native, I don't believe this is the issue. – Quach90 Feb 20 '19 at 22:55
  • well, now you shall check "component did mount" and check child order, https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/birth/post_mount_with_component_did_mount.html – Soleil Feb 21 '19 at 15:45
  • I checked the child order and everything is as it should be, it seems. I also checked that other views that are in the history are not rerendering, as they shouldn't. – Quach90 Feb 21 '19 at 17:00

0 Answers0