performancereduxreact-reduxredux-actions

How is performance affected by the dispatching of numerous actions in a React and Redux app?


How big of an effect do actions have on performance, more precisely: dispatching said actions?

Let's say the same action is dispatched 10 times in a row on a single user interaction with the UI, how would that affect performance? Or, does it even affect performance?


Solution

  • It primarily depends if React batches the following render. You can either have one render or one dispatch per render - that's totally up to React. Normally React batches in event handlers and effects, but not in async code. You can manually control this by using the batch api (re-exported with that name in react-redux).

    Generally though, the recommendation is to dispatch one action that described what happened and all the necessary information and let any number of reducers react to that. Keep your logic out of your application layer (=React) and inside of your business layer (=Redux).

    https://redux.js.org/style-guide/style-guide/#model-actions-as-events-not-setters
    https://redux.js.org/style-guide/style-guide/#allow-many-reducers-to-respond-to-the-same-action
    https://redux.js.org/style-guide/style-guide/#avoid-dispatching-many-actions-sequentially