redux-persist-transform-filter icon indicating copy to clipboard operation
redux-persist-transform-filter copied to clipboard

Big performance issue

Open magrinj opened this issue 4 years ago • 2 comments

I was using this library to blacklist a part of my reducer state. This lead in big performances issues, using a simple blacklist filter like this one:

export const blackListEntitiesFilter = createBlacklistFilter('entities', [
  'activities',
  'photos',
  'users',
]);

With this filter, app became really slow ! The amount of datas is equivalent to 33kb.

So I use this custom filter that is doing the same:

  createTransform(
    // inbound
    (inboundState, key) => {
      return inboundState
        ? omit(inboundState, ['activities', 'photos', 'users'])
        : inboundState;
    },

    // outbound
    (outboundState, key) => {
      return outboundState
        ? omit(outboundState, ['activities', 'photos', 'users'])
        : outboundState;
    },

    {whitelist: ['entities']},
  ),

And the app works well for now, maybe it's related to the cloneDeep of this library when the state grow. This library should use pick and omit from lodash, as this two functions are working with path and avoid cloning state !

magrinj avatar Sep 23 '20 21:09 magrinj

@magrinj Thanks for your solution!

Another solution without 3-rd party libraries (via the spread operator):

createTransform(
  // hydration (inbound)
  (inboundState, key) => {
    const { activities, photos, users, ...restOfInboundState } = inboundState;
    return restOfInboundState;
  },
  // rehydration (outbound)
  (outboundState, key) => {
    return { ...outboundState };
  },
  { whitelist: ['entities'] }
);

andrekovac avatar Feb 04 '21 23:02 andrekovac

Why would you return { ...outboundState } rather than just return outboundState?

chrisharrison avatar Feb 21 '22 17:02 chrisharrison