Redux in React Native app is very slow with lots of data

Question

I have a large array of JSON objects I’m storing in a single Redux variable (~8k items, each with object about 1kb each for a total of 8mb). This seems to make Redux calls slow even for the most trivial actions and reducers that don’t actually do anything. For example, calling this doNothing() action and reducer produces a 500ms wait time on device without running on the debugger:

// action
export const doNothing = () => {
  return {
    type: DO_NOTHING
  };
};

// reducer
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case DO_NOTHING: {
      return state;
    }
    default:
      return state;
  }
};

My best attempt to profile this issue is via slowlog, which is where I came up with the 500ms figure for the Redux call in my React component. For a smaller set of data (~500 items), I still get a wait, but it’s closer to 100ms. This is all on device and it gets slower on the simulator and the debugger. I'm testing this on a simple view with just a button to rule out complications from expensive re-selects and re-renders. A possible complication is that I'm using redux-offline which persists the Redux store to AsyncStorage, however I get identically poor performance when I turn off persistence.

Ideally I address the bottleneck directly, but I’m also open to workarounds. I tried wrapping the action calls in setTimeout, but that just seems to delay the slowdown in my React Native app.

Thanks in advance for any suggestions!

user_10874328 · Answer

Storing a large array of data in the redux state which indirectly gets stored in RAM is not a reliable way.

The best practice would be to use a local database so that it will store data in storage memory.

For ReactNative there is a popular database Watermelon DB that fits this kind of scenario

Do check out it's documentation : https://nozbe.github.io/WatermelonDB/

Here is what it solves

For simple apps, using Redux or MobX with a persistence adapter is the easiest way to go. But when you start scaling to thousands or tens of thousands of database records, your app will now be slow to launch (especially on slower Android devices). Loading a full database into JavaScript is expensive!

Watermelon fixes it by being lazy. Nothing is loaded until it's requested. And since all querying is performed directly on the rock-solid SQLite database on a separate native thread, most queries resolve in an instant.

Use Watermelon DB to store/retrieve large data

And meanwhile, use the redux state for storing only small data.

Hope this helps

Redux in React Native app is very slow with lots of data

1 Answers