9 ms·

How to optimize React applications that use Redux

130 points by juliankrispel 9y ago

acemarke 9y ago
Pretty good summary of the main points for good React-Redux performance. I will say that I'm not a fan of writing `mapState` functions inline in `connect`, as it makes it harder to read them (especially with that parameter destructuring in those examples). But, good post. I frequently see people ask what's wrong with just connecting the top-most component, and you've captured the main reasons why that's bad for perf. And yes, you absolutely should use memoized selectors in your `mapState` functions. If anyone's interested, I discussed related aspects of good Redux performance in my blog post "Practical Redux, Part 6: Connected Lists, Forms, and Performance" [0], and have a lot of other articles on both React and Redux performance topics in my links list at [1]. Also, my post "Practical Redux, Part 7: Form Change Handling" [2] specifically shows off a React component I built to buffer change events from text inputs to help improve UI performance. [0] http://blog.isquaredsoftware.com/2017/01/practical-redux-part-6-connected-lists-forms-and-performance/ http://blog.isquaredsoftware.com/2017/01/practical-redux-par... [1] https://github.com/markerikson/react-redux-links/blob/master/react-performance.md https://github.com/markerikson/react-redux-links/blob/master... [2] http://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/ http://blog.isquaredsoftware.com/2017/01/practical-redux-par...
- motet_a 9y ago
  Note that the title is confusing since the article is more related to react-redux than Redux itself. Redux is too simple to suffer from performance problems.
msoad 9y ago
I switched to MobX and can't be happier. Performance is never a problem and everything is just simpler and easier to understand. I think you should give MobX a shot.
- beefsack 9y ago
  In my experience, Redux seems to fit better with those coming from a FP background, and MobX seems to sit well with those with OOP backgrounds.
  - acemarke 9y ago
    Yep, absolutely true. Preethi Kasireddy did a fantastic presentation at ReactConf comparing Redux and MobX [0], Robin Wieruch wrote a good article comparing them last year [1], there was a Reddit thread with good discussion as well [2], and I have links to more comparisons at [3]. They're different tools taking very different approaches to solving the same kinds of problems, and they definitely appeal to different developers. [0] https://youtu.be/76FRrbY18Bs https://youtu.be/76FRrbY18Bs [1] http://www.robinwieruch.de/redux-mobx-confusion/ http://www.robinwieruch.de/redux-mobx-confusion/ [2] https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ https://www.reddit.com/r/reactjs/comments/4npzq5/confused_re... [3] https://github.com/markerikson/react-redux-links/blob/master/mobx-tutorials.md#mobx-and-redux-comparisons https://github.com/markerikson/react-redux-links/blob/master...
  - acjohnson55 9y ago
    Yep. Redux does a great job of pushing mutation out of your application logic and into the library machinery, much like React does. Together, you get logic that's remarkably pure. It makes for an application that's dead simple to debug. I've never tried MobX, but it looks pretty impressive too. I can imagine it working really well if you have the discipline to not leak your mutations all over the place.
    - aidos 9y ago
      MobX (in strict mode) forces you to annotate your mutations (via the @action decorator). MobX is useful mostly as the data model / selector part of redux. It does an awesome job of it. Once you've defined your core data model, you can create layers of computed properties and transformations out to your view. The view then rerenders in a really optimal way. Where redux shines is the prescriptive nature. The layout of a redux app is fairly well defined at this stage and there are "right" and "wrong" places to put (and look for) different types of code. With MobX there's still no clear way to layout your application, so, as you say, you need to be more disciplined with your approach.
dsun179 9y ago
A few months ago I read the the article from the redux-creator who sais that you should only use redux if you really need it. I found out that most of my trubbles came from the fact that I should not have used redux. I lately removed it and am now using rxdb for things that have to be state-like and persistent. For everything else I just use reacts setState on the plain components.
- mparr4 9y ago
  The (excellent) article is "You Might Not Need Redux" and is a great read whether you're considering Redux, already using it, or never will. https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 https://medium.com/@dan_abramov/you-might-not-need-redux-be4...
noncoml 9y ago
I never understood why Redux became so popular. It basically tries to enforces a few old ideas, pure functions, message passing and immutability, with no help from the language, which results in verbose and ugly code. `a.b = c` becomes `Object.assign({}, a, { b = c })` and `object.method(data)` becomes `store.dispatch({type: METHOD, data})` with the implementation code of the "object" being a huge "switch" statement. If you want immutability, pure functions and message passing, then why not use a language that is build around them and make your life easier? Clojurescript maybe? Also having a single store for all your data, definitely doesn't help with speed as a single event suddenly becomes an O(LogN) operation in the best case.
- acemarke 9y ago
  Several reasons why it's popular: - It has helped many developers organize their "write logic" and state management, and made it easier to test that code - Time travel debugging is a fantastic tool for understanding what happens in your application - One of my favorite quotes: "Redux is a generic framework that provides a balance of just enough structure and just enough flexibility. As such, it provides a platform for developers to build customized state management for their use-cases, while being able to reuse things like the graphical debugger or middleware." - And it doesn't hurt that Dan Abramov is a well-known figure in the React community, and an incredibly helpful and friendly person too. No, Javascript doesn't have immutability built-in (sadly), but that doesn't mean you should totally give up on applying those principles in Javascript code. There's WAY more developers writing JS than Clojurescript, and those devs can still make use of tools like Redux in their applications. Besides, there's a variety of approaches for handling data immutably, whether it be `Object.assign`, the Stage 3 object spread operator, Immutable.js, or the many immutable update utility libraries out there. Your comment about speed doesn't make sense. A few function calls and switch statements will execute quickly overall, and perf benchmarks will show that your reducer logic is almost never going to be the bottleneck in a Redux application. Some links for further related reading: - https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 https://medium.com/@dan_abramov/you-might-not-need-redux-be4... - http://redux.js.org/docs/faq/Reducers.html#reducers-use-switch http://redux.js.org/docs/faq/Reducers.html#reducers-use-swit... - http://redux.js.org/docs/faq/Performance.html#performance-all-reducers http://redux.js.org/docs/faq/Performance.html#performance-al... - https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md https://github.com/markerikson/react-redux-links/blob/master... - https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md https://github.com/markerikson/redux-ecosystem-links/blob/ma...
mparr4 9y ago
I've not heard anyone complain about Redux's performance. Do folks consider it slow? If so, what about it is slow? And slower than what?
- ceedan 9y ago
  No to all questions. An app that uses redux poorly becomes slow. Naive devs then claim redux makes their app slow. Propeelu using reselect solves a lot of the problems.
- acemarke 9y ago
  The most common complaints are about UI refresh performance in a React-Redux app, particularly if you're dispatching an action for every keystroke in a text input. The original post we're commenting on covers several aspects of good performance, and my other comment in this thread at https://news.ycombinator.com/item?id=14706509 https://news.ycombinator.com/item?id=14706509 has links to benchmarks and more info on various performance scenarios and optimizations.
- juliankrispel 9y ago
  I wrote the post because I've seen complaints on community chats. Lots of things that seem obvious to you and me aren't obvious to others :)

130 points by juliankrispel 9y ago

Pretty good summary of the main points for good React-Redux performance. I will say that I'm not a fan of writing `mapState` functions inline in `connect`, as it makes it harder to read them (especially with that parameter destructuring in those examples). But, good post. I frequently see people ask what's wrong with just connecting the top-most component, and you've captured the main reasons why that's bad for perf. And yes, you absolutely should use memoized selectors in your `mapState` functions. If anyone's interested, I discussed related aspects of good Redux performance in my blog post "Practical Redux, Part 6: Connected Lists, Forms, and Performance" [0], and have a lot of other articles on both React and Redux performance topics in my links list at [1]. Also, my post "Practical Redux, Part 7: Form Change Handling" [2] specifically shows off a React component I built to buffer change events from text inputs to help improve UI performance. [0] http://blog.isquaredsoftware.com/2017/01/practical-redux-part-6-connected-lists-forms-and-performance/ http://blog.isquaredsoftware.com/2017/01/practical-redux-par... [1] https://github.com/markerikson/react-redux-links/blob/master/react-performance.md https://github.com/markerikson/react-redux-links/blob/master... [2] http://blog.isquaredsoftware.com/2017/01/practical-redux-part-7-forms-editing-reducers/ http://blog.isquaredsoftware.com/2017/01/practical-redux-par...

motet_a 9y ago
Note that the title is confusing since the article is more related to react-redux than Redux itself. Redux is too simple to suffer from performance problems.

msoad 9y ago

I switched to MobX and can't be happier. Performance is never a problem and everything is just simpler and easier to understand. I think you should give MobX a shot.

beefsack 9y ago
In my experience, Redux seems to fit better with those coming from a FP background, and MobX seems to sit well with those with OOP backgrounds.
- acemarke 9y ago
  Yep, absolutely true. Preethi Kasireddy did a fantastic presentation at ReactConf comparing Redux and MobX [0], Robin Wieruch wrote a good article comparing them last year [1], there was a Reddit thread with good discussion as well [2], and I have links to more comparisons at [3]. They're different tools taking very different approaches to solving the same kinds of problems, and they definitely appeal to different developers. [0] https://youtu.be/76FRrbY18Bs https://youtu.be/76FRrbY18Bs [1] http://www.robinwieruch.de/redux-mobx-confusion/ http://www.robinwieruch.de/redux-mobx-confusion/ [2] https://www.reddit.com/r/reactjs/comments/4npzq5/confused_redux_or_mobx/ https://www.reddit.com/r/reactjs/comments/4npzq5/confused_re... [3] https://github.com/markerikson/react-redux-links/blob/master/mobx-tutorials.md#mobx-and-redux-comparisons https://github.com/markerikson/react-redux-links/blob/master...
- acjohnson55 9y ago
  Yep. Redux does a great job of pushing mutation out of your application logic and into the library machinery, much like React does. Together, you get logic that's remarkably pure. It makes for an application that's dead simple to debug. I've never tried MobX, but it looks pretty impressive too. I can imagine it working really well if you have the discipline to not leak your mutations all over the place.
  - aidos 9y ago
    MobX (in strict mode) forces you to annotate your mutations (via the @action decorator). MobX is useful mostly as the data model / selector part of redux. It does an awesome job of it. Once you've defined your core data model, you can create layers of computed properties and transformations out to your view. The view then rerenders in a really optimal way. Where redux shines is the prescriptive nature. The layout of a redux app is fairly well defined at this stage and there are "right" and "wrong" places to put (and look for) different types of code. With MobX there's still no clear way to layout your application, so, as you say, you need to be more disciplined with your approach.

dsun179 9y ago

A few months ago I read the the article from the redux-creator who sais that you should only use redux if you really need it. I found out that most of my trubbles came from the fact that I should not have used redux. I lately removed it and am now using rxdb for things that have to be state-like and persistent. For everything else I just use reacts setState on the plain components.

mparr4 9y ago
The (excellent) article is "You Might Not Need Redux" and is a great read whether you're considering Redux, already using it, or never will. https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 https://medium.com/@dan_abramov/you-might-not-need-redux-be4...

noncoml 9y ago

I never understood why Redux became so popular. It basically tries to enforces a few old ideas, pure functions, message passing and immutability, with no help from the language, which results in verbose and ugly code. `a.b = c` becomes `Object.assign({}, a, { b = c })` and `object.method(data)` becomes `store.dispatch({type: METHOD, data})` with the implementation code of the "object" being a huge "switch" statement. If you want immutability, pure functions and message passing, then why not use a language that is build around them and make your life easier? Clojurescript maybe? Also having a single store for all your data, definitely doesn't help with speed as a single event suddenly becomes an O(LogN) operation in the best case.

acemarke 9y ago
Several reasons why it's popular: - It has helped many developers organize their "write logic" and state management, and made it easier to test that code - Time travel debugging is a fantastic tool for understanding what happens in your application - One of my favorite quotes: "Redux is a generic framework that provides a balance of just enough structure and just enough flexibility. As such, it provides a platform for developers to build customized state management for their use-cases, while being able to reuse things like the graphical debugger or middleware." - And it doesn't hurt that Dan Abramov is a well-known figure in the React community, and an incredibly helpful and friendly person too. No, Javascript doesn't have immutability built-in (sadly), but that doesn't mean you should totally give up on applying those principles in Javascript code. There's WAY more developers writing JS than Clojurescript, and those devs can still make use of tools like Redux in their applications. Besides, there's a variety of approaches for handling data immutably, whether it be `Object.assign`, the Stage 3 object spread operator, Immutable.js, or the many immutable update utility libraries out there. Your comment about speed doesn't make sense. A few function calls and switch statements will execute quickly overall, and perf benchmarks will show that your reducer logic is almost never going to be the bottleneck in a Redux application. Some links for further related reading: - https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367 https://medium.com/@dan_abramov/you-might-not-need-redux-be4... - http://redux.js.org/docs/faq/Reducers.html#reducers-use-switch http://redux.js.org/docs/faq/Reducers.html#reducers-use-swit... - http://redux.js.org/docs/faq/Performance.html#performance-all-reducers http://redux.js.org/docs/faq/Performance.html#performance-al... - https://github.com/markerikson/react-redux-links/blob/master/immutable-data.md https://github.com/markerikson/react-redux-links/blob/master... - https://github.com/markerikson/redux-ecosystem-links/blob/master/immutable-data.md https://github.com/markerikson/redux-ecosystem-links/blob/ma...

mparr4 9y ago

I've not heard anyone complain about Redux's performance. Do folks consider it slow? If so, what about it is slow? And slower than what?

ceedan 9y ago
No to all questions. An app that uses redux poorly becomes slow. Naive devs then claim redux makes their app slow. Propeelu using reselect solves a lot of the problems.
acemarke 9y ago
The most common complaints are about UI refresh performance in a React-Redux app, particularly if you're dispatching an action for every keystroke in a text input. The original post we're commenting on covers several aspects of good performance, and my other comment in this thread at https://news.ycombinator.com/item?id=14706509 https://news.ycombinator.com/item?id=14706509 has links to benchmarks and more info on various performance scenarios and optimizations.
juliankrispel 9y ago
I wrote the post because I've seen complaints on community chats. Lots of things that seem obvious to you and me aren't obvious to others :)