My MobX code performs better than my Redux code. Is there anything I can do to close the gap?

[jacqueslenormand]

I wrote some code to render 30000 text areas in mobx and and in redux. The mobx code rerenders the UI very quickly, whereas the redux version is laggy. Is there anything I can do to improve the performance of my redux code?

Here's the redux code:

import { memo, useCallback } from "react"
import produce from "immer"
import { Provider, useSelector } from "react-redux"
import { createStore } from "redux"

const reducer = (state, action) => {
    if (action.type === "set-value") {
        return produce(state, (state) => {
            state.values[action.index] = action.value
        })
    }
    return state
}

const store = createStore(reducer, { values: [] })

const dispatch = store.dispatch

const MDTextArea = memo(function MDTextArea({ index, value }) {
    return (
        <textarea
            key={"_m" + index}
            onChange={(ev) => {
                const txt = ev.target.value
                dispatch({ type: "set-value", index, value: txt })
            }}
            style={{ width: "300px", height: "100px" }}
            value={value}
        />
    )
})

const Part = memo(function Part({ index }) {
    const cb = useCallback((s) => s.values[index], [])
    const value = useSelector(cb)
    return <MDTextArea key={"_q" + index} index={index} value={value} />
})

const Top = memo(function Top() {
    let parts = []
    for (let i = 0; i < 30000; i++) {
        parts.push(<Part key={"_k" + i} index={i} />)
    }
    return parts
})

function App() {
    return (
        <Provider store={store}>
            <Top />
        </Provider>
    )
}

ReactDOM.render(<App/>, document.getElementById("root"))

[markerikson]

A few thoughts:

• This looks like a very artificial benchmark
• It also does look like a benchmark where Mobx is likely to perform better than Redux
• We specifically recommend not storing form state in Redux (or more to the point, not trying to dispatch actions on every keystroke)
• See https://redux.js.org/faq/performance for more suggestions

Do you have an actual real-world issue you're trying to address, or just the artificial benchmark?

[jacqueslenormand]

Thank you for the quick reply!

I do have a real world issue.

I'm building a flashcard system. I want to have all my flashcards rendered at once so I can quickly navigate between them using the keyboard. A flashcard is basically two textareas.

A deck of flashcards can have thousands of cards.

I'll probably need to switch to mobx or divide up a deck in parts to tackle this issue, but it would be nice to not have to.

[markerikson]

Generally, rendering thousands of items at once in React (or the DOM in general) is not a great idea to begin with :) At that point you should really start looking into either pagination or virtualization.

[jacqueslenormand]

Very true

I'm just trying to figure out the limits of the system so I can plan what to use.

The number of cards I can render might influence the deck size and what technology I use and whether I paginate or use virtual lists.

There are clear benefits to rendering everything in terms of how snappy the UI feels and what keyboard interactions I can support

I'm only running this on my local computer

[markerikson]

The other couple notes I'd toss out are:

• If you want to use Redux, don't tie input changes directly to dispatching. Keep form inputs either uncontrolled, or controlled by local state, and then dispatch only when the user is done editing
• React runs noticeably faster in production mode than it does in dev mode

[jacqueslenormand]

Thanks for the great tips! It didn't occur to me to just have uncontrolled components