[v8] useSelector without custom subscription manager is slower than v7 (performance regression)

[Kasdy]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 18.0.0-rc0
• ReactDOM: 18.0.0-rc0
• Redux: 4.1.2
• React Redux: 8.0.0-beta2

What is the current behavior?

In React-Redux v8 the custom Subscription manager was removed from useSelector,
and store.subscribe from Redux is used directly in useSyncExternalStore call.

This will bring back a performance problem (#1450), because Redux unsubscription relies on indexOf\splice.

React 18 + React-Redux v8.0.0

React 17 + React-Redux v7.2.6

Test code:

const store = createStore(
    (state = 0, action) => (action.type === "INC" ? state + 1 : state)
);
const increment = () => ({ type: "INC" });

function App() {
    const state = useSelector(s => s);
    const dispatch = useDispatch();

    const [children, setChildren] = useState(0);

    const toggleChildren = () => setChildren(c => c ? 0 : 50000);

    return <div>
        <button onClick={toggleChildren}>Toggle Children</button>
        <button onClick={() => dispatch(increment())}>Increment</button>
        {[...Array(children).keys()].map(i => <Child key={i}/>)}
    </div>;

}

function Child() {
    const v = useSelector(s => s);
    return <div className="child">{v}</div>;
}

What is the expected behavior?

The Subscription manager used in v7 has better performance than Redux unsubscription used in v8 with many listeners.
It's still in the bundle, because <Provider> uses it, so it could be used again in useSelector too.

Which browser and OS are affected by this issue?

No response

Did this work in previous versions of React Redux?

• Yes

[markerikson]

Moving the "unit test" question over here:

About the unit test, that would be really cool, but I can't think of a way to detect it... because it works even though it's slow. measuring the test execution time does not look good to me either. I discovered it by chance, because I was studying the new React18 hooks, and I was digging in React-Redux source.

I suppose given the extreme difference between "quadratic" and "normal" behavior here, it might actually be legit to just copy-paste this example and assert that the elapsed time should be, say, <250ms or something.

[markerikson]

@Kasdy I implemented a fix in #1870 , and included a unit test that tries to capture the perf differences. Can you take a look and also try out the CodeSandbox CI build?

[Kasdy]

@markerikson
I tried the PR with my test code (React v18 + React-Redux v8) and now the unsubscribe is fast again! (~1ms for 50K child)
I tried also React v17 + React-Redux v8 (I had to import react-redux/lib/compat) and it's fast too (same ~1ms)