React Native Redux State Update Holds Navigation Call

Issue

I have two pages in my react native app:

1. Displays a list of data with ids and titles. By pressing on item, we should set an ID of current data type in redux and set state.current by finding an item inside a redux slice which has all data. Then, we navigate to next page.

example:

    setCurrentData: (state, action) => {
      state.current = dataAdapter
        .getSelectors()
        .selectById(state, action.payload.id)
    },

selectors:

export const getCurrentCommunity = state => state.allData.current

2. Second page gets the data by calling useSelector(getCurrentCommunity) and displays it.

Everything works well and i pass/fetch the data correctly from redux. The problem is that computations before navigation are really slow. Setting data in redux runs fast (performance.now() shows good results), but something after that state update is holding my navigation call.

Of course, i can just pass the data as a param, but it is not an option because later i would like to fetch it without passing anything to common components without routing.

What can i do to speed up the redux state update and make my navigation call faster?

btw, if i remove redux state setters, navigation works perfectly, 70-80ms delay (comparing to 2-3 seconds with redux)

Solution

Save yourself that setCurrentData action - duplicating your data within your store is a bad practice, and derived data like this should just be part of your selectors.

Instead just set the current page id (if that is even necessary)

    setCurrentId: (state, action) => {
      state.currentId = action.payload.id
    },

const dataSelectors = dataAdapter.getSelectors(state => state.allData)
export const getCurrentCommunity = state => dataSelectors.selectById(state, state.allData.currentId)

Or even skip the action completely:

const dataSelectors = dataAdapter.getSelectors(state => state.allData)
export const getCurrentCommunity = (state, id) => dataSelectors.selectById(state, id)

and call

useSelector(state => getCurrentCommunity(state, idFromNavigationProp)

Answered By - phry