Updates are slow with Redux

Question

I'm building a React Native app, using Redux and AsyncStorage. When a user deletes an item, updates happen a bit slow (2-3 seconds).

I have an array of objects (rather small). I delete an item in this array with such function:

          let idFordeleteFav = categoryArrFav.map(function(el) {return el['name']}).indexOf(itemName) 
          let cleanedCategory = [...categoryArrFav.slice(0, idFordeleteFav), ...categoryArrFav.slice(idFordeleteFav+1)]
          let completeNewList = {...allAffirmation, [category]: cleanedCategory}
          props.dispatch(setAffArr(completeNewList))

My mapStateToProps looks like this:

const mapStateToProps = (state) => {
  const { appR } = state
  return {
    allAffirmation: appR.allAffirmation,
    affirmations: appR.affirmations}
}

I wonder, what I can do to update faster.

Answer 1

First of all, check how much middleware you have and the logic inside them. Also, I recommend you replace async storage with react native MMKV (https://github.com/mrousavy/react-native-mmkv) which is much faster:

You need to do 2 things. First, create a wrapper for MMKV because it is sync:

import { Storage } from 'redux-persist'
import { MMKV } from "react-native-mmkv"

const storage = new MMKV()

export const reduxStorage: Storage = {
  setItem: (key, value) => {
    storage.set(key, value)
    return Promise.resolve(true)
  },
  getItem: (key) => {
    const value = storage.getString(key)
    return Promise.resolve(value)
  },
  removeItem: (key) => {
    storage.delete(key)
    return Promise.resolve()
  },
}

The second step is migration from the async store for existing users if you have https://github.com/mrousavy/react-native-mmkv/blob/master/docs/MIGRATE_FROM_ASYNC_STORAGE.md