Add caching to serializableStateInvariantMiddleware

[GeorchW]

The serializableStateInvariantMiddleware is currently scanning the entire state for non-serializable values whenever an action is dispatched. Dispatching a bunch of actions thus takes about O(numDispatchedActions * stateSize) time once the state is populated, independent of the size of the action or the complexity of the reducer. This massively slows down the application performance in dev mode for big state trees. Such trees can quickly occur when downloading a bunch of data and putting it into the store, e.g. using rtk-query.

In #885, it was discussed to not check the serializability of the state at all (and only the actions) as an optional addition, which was implemented in #943. It has the disadvantage of giving up detecting non-serializable objects created in a reducer, and I suppose that that's the reason it isn't enabled by default. It can also be avoided by excluding some parts of the store from the middleware using ignoredPaths. All of these options, however, require profiling and googling to realize why rtk/rtk-query is slow and what to do about it.

This PR introduces WeakSet-based caching to the middleware, making the performance independent of the state size as long as the state is frozen, which happens automatically when using the toolkit-provided functions for creating slices.

When enabled by default, developers should experience the same time complexity in dev and prod, and they would need to profile/google much less.

Open questions

• How should we determine the frozen-ness of an object? Can we assume that all descendants of an object are frozen if the object itself is frozen? Do we need to imitate the getEntries-based method of finding descendants of findNonSerializableValue?

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	bcd0615
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/63d57139e674330008a53cf1
😎 Deploy Preview	https://deploy-preview-3115--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit bcd0615:

Sandbox	Source
Vanilla	Configuration
Vanilla Typescript	Configuration
rsk-github-issues-example	Configuration
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration

[markerikson]

Oh this is neat! And yeah, the very first question that came to mind was "what about older browsers without WeakSet?", and I see that's handled.

(I don't want to keep supporting IE11, and RTK 2.0 will explicitly drop support for older browsers, but shipping code that always uses WeakSet in default behavior would have been pretty close to a breaking change by itself, and thus not really suitable for a minor or patch.)