As Javascript applications moved beyond small nuggets of script or plain DOM manipulation into fully-fledged Single Page Applications several problems of scale emerged. One, the problem of code organization, went through various iterations (gulp, grunt, bower etc) until Webpack and NPM came to rule the roost as bundler and dependency manager of choice. Eventually some of the brightest minds in the community turned their attention to the scalability of data and state management became a hot topic. The Flux architecture, with its core of immutability and unidirectional data flow, which originated in Facebook proved the stimulus for various state management solutions.

Some frameworks (e.g. Vue with Vuex) have an official state management package. React has redux which is undeniably the most popular solution, however there are alternatives and, even in redux, there are problems to be solved around how to model side-effects (think remote data access as a common side effect).

With the arrival of React 16.3 the React Context API went from an undocumented and unstable part of the architecture to another potential alternative for smaller applications. I decided to produce a canonical Todo application using 6 different approaches to get a flavour of how they differ from each other. The 6 state management options are:

The code is here. The master branch implements the baseline solution using local state and each other state management option is a branch from that, as explained in the readme. Each solution also uses typescript and the antd component library.

There are already a whole host of examples available online, the reason I thought it was worth another is that I found some of them used older versions of the state management libraries or of typescript and wouldn’t work as written. I hope to keep the code up to date as new versions are released. Hopefully this will be useful for people taking a look at these options.