TL;DR
- Redux is the top dog.
- This category is still in flux (get it?).
State Management
Filter:
Show:
- Never heard of it
- Heard of it, not interested
- Heard of it, would like to learn
- Used it before, would not use again
- Used it before, would use again
Awareness
State Management is an emerging category in JavaScript, and not necessarily one every developer needs a tool for at the moment.
Redux is clearly the most popular of the Flux implementations, an architecture championed by Facebook as a system for managing state globally in React or other frontend libraries. 87% of users had heard of Redux, which is pretty incredible given it is barely a year old and competing for mindshare with a host of other Flux implementations (as we'll see below).
On the other hand, despite being one of the most established Redux alternatives MobX still has only 30% awareness.
Interest
Interest is pretty high in all of these tools, especially Redux (81% of people who know about it wanting to try it), which fits the narrative of increasingly complex front-end applications. Given most of these tools didn't exist two years ago, it's clearly a rapidly changing landscape.
It's especially interesting seeing the high level of interest in Redux, given that Redux creator Dan Abramov repeatedly stresses that not every app needs it, and that users should wait until they run into problems before building an app with Redux.
Satisfaction
Overall, Redux users are happy users with one of the highest satisfaction ratings of any library; MobX and Relay are middling in this respect and we can perhaps expect to see other competitors emerge in the months to come in this rapidly changing area.
It certainly won't be a surprise to see a big difference in this area in future surveys.
How likely are state management library users to also use other technologies?
| Plain JavaScript | ES6 | CoffeeScript | TypeScript | Elm | ClojureScript | No Framework | React | Angular | Angular 2 | Ember | Vue | Backbone | Redux | MobX | Relay | REST API | Firebase | GraphQL | Apollo | Falcor | Horizon | Meteor | FeathersJS | DoneJS | MERN | MEAN | Mocha | Jasmine | Enzyme | Jest | Cucumber | Ava | Plain CSS | SASS/SCSS | LESS | CSS Modules | Aphrodite | Webpack | Grunt | Gulp | Browserify | Bower | Native Apps | React Native | Cordova | PhoneGap | NativeScript | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Redux | -3 | 37 | -1 | 0 | 11 | 7 | -8 | 62 | -14 | -2 | 1 | -1 | -2 | 100 | 10 | 13 | 12 | 11 | 17 | 9 | 6 | 5 | 1 | 4 | 0 | 17 | -2 | 33 | 13 | 38 | 21 | 5 | 14 | -3 | 9 | 0 | 20 | 10 | 51 | -12 | -1 | 8 | -19 | 3 | 29 | -7 | -7 | 0 |
| MobX | -2 | 8 | 1 | 5 | 5 | 5 | -3 | 14 | -4 | 0 | 2 | 4 | -2 | 10 | 100 | 10 | 1 | 5 | 10 | 9 | 6 | 6 | 3 | 10 | 9 | 6 | 0 | 7 | 1 | 15 | 9 | 2 | 10 | 0 | 0 | 1 | 9 | 16 | 12 | -4 | -2 | 1 | -6 | 2 | 12 | 1 | 0 | 3 |
| Relay | -2 | 6 | 2 | 2 | 5 | 11 | -2 | 11 | -2 | 2 | 3 | 1 | 0 | 13 | 10 | 100 | 0 | 3 | 45 | 15 | 12 | 8 | 2 | 5 | 6 | 6 | -1 | 9 | 3 | 14 | 17 | 4 | 9 | -3 | 0 | 0 | 10 | 10 | 11 | -2 | -3 | 0 | -4 | 4 | 14 | 0 | 1 | 3 |
Note: “user” defined as people who picked “I've used it before, and would use it again”. Phi coefficient values go from -100 to +100, darker red indicates stronger positive correlation, darker blue indicates stronger negative correlation.
There are no great surprises here with Redux being associated with all the building blocks of the React stack: React itself, Webpack, Enzyme, React Native, etc.
MobX shows the same general patterns, just with weaker correlations.
Recommended Resources
Presented by
Egghead.io
Getting Started with Redux
Dan Abramov
Learn the basics of Redux, so that you can start using it to simplify your applications.
Manage Complex State in React Apps with MobX
Michel Weststrate
MobX is designed to enable building web applications with a complex data model in an intuitive and very performant manner.
Thanks to our partners for supporting this project. Check them out for more awesome programming courses!
Other State Management Frameworks (Mentions)
Perhaps unsurprisingly, there are a plethora of alternative state management solutions used; around half of which are competing Flux implementations. However the low absolute numbers here indicate that Redux has won the race for Flux mindshare, and most of the non Flux libraries here are associated with a specific front end framework like Vuex.
RxJS, Elm, and CycleJS are probably the ones to pick out here as interesting up-and-coming state management solutions; however their low absolute numbers makes it hard to tell much about their momentum.
On a scale of 1 to 5, how happy are you with your current solution for state management?
Show:
Interestingly, given Redux's clear dominance and high level of satisfaction, overall users are relatively unhappy with their current state management solutions with an average happiness of 3.19, one of the lowest of the survey.
It's possible that some developers are put off by Redux's close association with React, even though it can be used outside of that ecosystem. In any case, it'll be interesting to see if the average happiness levels increase as more people adopt Redux and its alternatives.
Conclusion
State management is an interesting category and I personally don't think the whole story has been told yet. I think there's a lot of experimentation to come, but given the numbers we see here, perhaps a large part of that will be built on top of Redux, rather than in opposition to it.
In fact Apollo (the cross-platform GraphQL client we are working on at Meteor) follows this exact strategy, building its state management capability directly on top of a Redux store.
We think this makes sense, because it means the growing wealth of Redux tools (debuggers, developer tools, integrations) can be used with Apollo with no effort on our part. So it wouldn't surprise me if many more end up following this pattern.
About the Author
