Introduce a state management library

[SilviaZeta]

Considerations

With React router, a route can change while some async operation (for example, fetching some data from STORE) is still ongoing. This causes setState to be invoked when the component is dismounted and leads to the React warning “Can’t perform a React state update on an unmounted component”.

For now we have handled this issue by skipping the setState operation if a component is unmounted (with theisMounted workaround), but this is not a best practice. We have also considered canceling the async operations (i.e., API calls), but we are unhappy with this second solution, because it makes it hard to handle any side-effects, as these vary between operations and depend on the point at which an operation is interrupted.

Storing states to a centralised store is a better solution, as it allows to decouple state management from the component lifecycle and has the extra benefit of reducing the number of API calls required for the app to work.

Alternatives we have considered

We could also move the state management async code up in your component tree, although not clear how to do this in the context of a React router design.

[ChasNelson1990]

Could we keep the state management out of ANNOTATE/CURATE/MANAGE/AUDIT/etc.? If so, is 2022 the right time to raise this again for discussion? Or shall we mark as wontfix for now?

[cooper667]

I think it's something we want at some point. I don't know if that point is now, but we should talk about it.

[ChasNelson1990]

Just discussed: more like a cache than a state management store