React-immutable-state-invariant Slows Performance

[cole-robertson]

Does Redux toolkit automatically come with the package React-immutable-state-invariant? I am getting terrible performance updating my state with some large objects since it seems that React-immutable-state-invariant has a detect mutations function that looks through all the the keys of this object multiple times.

I do not want to use this package. Looking at the github it seems to say that you should not use this in production. I don't want to even use it in development since Redux toolkit has immer for direct state mutations anyway.

How can I configure Redux Toolkit to not use this middleware? Thank you

[cole-robertson]

I see #412
Is there not a current way to configure middleware right now?

[markerikson]

Just answered this on Reddit, but I'll answer here as well:

Yes, we use immutable-state-invariant by default, in development mode only. And yes, it is a deep check of your entire state, so if you have a rather large state, that will slow things down. Ditto for the serializable check middleware.

Per the docs, you can disable either of the dev check middleware by using getDefaultMiddleware() options.

[phryneas]

See the docs for configureStore - you can use different middlewares.

const store = configureStore({
  reducer: {/*...*/},
  middleware: [...getDefaultMiddleware({immutableCheck: false})]
})

[itsramiel]

Is there any place in the docs where it is mentioned that these development middlewares affect performance during dev. I was so upset about the performance of my react native app, so I dispatched an action that does nothing and I was able to see that it was still slow. I remembered something about additional development middlewares added, so I turned them off and suddenly it is much faster.

This really need to be somewhere in the docs

[phryneas]

If the development middlewares take longer than 32ms per action, they will print warnings to your console.log.
Did you ignore that?

[itsramiel]

// Ignores redux warning about serialization took a long time
LogBox.ignoreLogs(["SerializableStateInvariantMiddleware"]);

Yup there it is. My bad

[alexisgahon]

Update: getDefaultMiddleware ne s'importe plus.

const store = configureStore({
  reducer: {/*...*/},
  middleware: (getDefaultMiddleware) => [...getDefaultMiddleware({immutableCheck: false})]
})

[balsick]

Update: getDefaultMiddleware ne s'importe plus.

const store = configureStore({
  reducer: {/*...*/},
  middleware: (getDefaultMiddleware) => [...getDefaultMiddleware({immutableCheck: false})]
})

In case of typescript, what worked for me is this:

middleware: getDefaultMiddleware =>
    getDefaultMiddleware({immutableCheck: false}),

[EskiMojo14]

yep - the spread is unnecessary, and in RTK 2.0 Typescript users are now required to use a Tuple instance. If you want to add more middlewares to the defaults, you should use the provided concat and prepend methods from the returned Tuple instance.