jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

mapStateToProps vs useSelector

Benchmark created on July 3, 2024

Preparation HTML

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Redux Performance Test</title>
    <!-- React and ReactDOM -->
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <!-- Redux -->
    <script src="https://unpkg.com/redux/dist/redux.js"></script>
    <!-- React-Redux -->
    <script src="https://unpkg.com/react-redux/dist/react-redux.js"></script>
</head>
<body>
    <div id="root"></div>
 </body>

Setup

const { createStore } = Redux;
const { Provider, connect, useSelector } = ReactRedux;
const { useState, useEffect } = React;
const { render } = ReactDOM;

// Redux setup
const initialState = { value: 0 };
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { value: state.value + 1 };
        default:
            return state;
    }
};

const store = createStore(reducer);

// Component using mapStateToProps
const mapStateToProps = (state) => ({
    value: state.value,
});

const ConnectedComponent = connect(mapStateToProps)(({ value }) => {
    return <div>{value}</div>;
});

// Component using useSelector
const SelectorComponent = () => {
    const value = useSelector((state) => state.value);
    return <div>{value}</div>;
};

const rootElement = document.createElement('div');
rootElement.id = 'root';
document.body.appendChild(rootElement);

Test runner

Ready to run.

Test Ops/sec

connect

Testing in
Test	Ops/sec
connect	`ReactDOM.render( <Provider store={store}> <ConnectedComponent /> </Provider>, document.getElementById('root') ); store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' })`	ready
selector	`ReactDOM.render( <Provider store={store}> <SelectorComponent /> </Provider>, document.getElementById('root') ); store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' }) store.dispatch({ type: 'INCREMENT' })`	ready

ReactDOM.render(
    <Provider store={store}>
        <ConnectedComponent />
    </Provider>,
    document.getElementById('root')
);
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })

ready

selector

ReactDOM.render(
    <Provider store={store}>
        <SelectorComponent />
    </Provider>,
    document.getElementById('root')
);
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'INCREMENT' })

ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published on July 3, 2024