Selector for multiple instances

Question

I am working on an application that can include multiple instances of components, for example, a component that reorders one data set into a new data set. There can be a large number of these "reorder components" open in the application, with the user having one active component at a time and can switch between them. Based on other readings, the redux store is structured something like:

myReducer: {
  myInstanceId1: {
    id: 'myInstanceId1',
    //... some other props
  },
  myInstanceId2: {
    id: 'myInstanceId2',
    //... some other props
  }
}

The selector in the component would look something like:

const mySelector = useSelector(*myActiveInstanceId*, *mySelector*);

The issue I'm running into is that with this instance id, the selector is getting recreated all the time. One way around this was to add a memoized function in the store that takes the key and wrapping the redux-toolkit createSelector():

export const selectMyItem= memoize((key:string) => {
    return createSelector([itemState], (state) => {
        return state[key);
    });
});

Not finding a ton of information on this subject so I'm trying to figure out what the best route for this is in terms of performance given there could be hundreds of component instances.

Selector for multiple instances

0 Answers0