Current frontend state-management is a little clunky, a switch from React Context/Reducer to MobX may be worth it

[cdmoss]

Problem

Global and semi-global frontend state is orchestrated by React Context/Reducer, which causes necessary full tree rerenders that degrade app performance and makes the state management code less readable. These problems will only get worse as robosats extends its functionality (e.g. federation, PRO)

Proposed Solution

Switch to MobX, a popular, simple-to-use observer based library that allows for much more precise state-driven rerenders.

[Reckless-Satoshi]

Hey @cdmoss thank you for proposing this change!

Indeed, useContext is becoming untamable and will be hard to maintain as complexity increases. Let's make the switch to MobX as state management a rewarded task with 600K Sats ⚡ bounty.

The federation layer adds a Exchange and Coordinator models/classes and routines to cycle through every coordinator API and aggregate. Ideally we should be able to implement MobX on main and then also rebase the-federation-layer since we do not know when the-federation layer will be ready to be merged. However, implementing MobX into both branches might require a bit of a duplicity of work (probably not too much!)

Once MobX is in place, it will be much easier to build a proper Robot Garage (many robots and many orders that updated in the background rather than a simple list of robot that are not really alive).

[jordanconia]

Hello! @Reckless-Satoshi @cdmoss

I'm starting to explore the project. Are you currently managing all the state in AppContext? /~https://github.com/Reckless-Satoshi/robosats/blob/b585d376b2fb2b658631398e4503f9e9b4567039/frontend/src/contexts/AppContext.ts

It seems that the state manager's main purpose is syncing an external state with the app. Therefore, I recommend using TanStack Query for this scenario since it will reduce much of the boilerplate.

[Reckless-Satoshi]

I'm starting to explore the project. Are you currently managing all the state in AppContext? /~https://github.com/Reckless-Satoshi/robosats/blob/b585d376b2fb2b658631398e4503f9e9b4567039/frontend/src/contexts/AppContext.ts

Sorry for noticing this message so late. Indeed the app state lives in AppContext and most querying is done there as well. While querying itself is a different issue of simply state management that does not trigger unnecesary re-renders, we could also tackle it as a task.

Note, in any case, that we have custom functions for requesting from the coordinator APIs in /src/services/api/ given that, if the frontend is running in the react-native wrapper for Android, then the requests must be done trough the torDaemon

[Reckless-Satoshi]

This task is now once again looking for dev for its reward of 600K Sats

[ronyevernaes]

Hi @Reckless-Satoshi ... I can take a shot on this

[MrBlackGhostt]

Hi @Reckless-Satoshi, I have knowledge of React and some experience i want to work on this issue and use my skills to solve it can you assign it to me

[Reckless-Satoshi]

Hey @ronyevernaes and @MrBlackGhostt ,the-federation-layer-v0.6.0 where we are currently working most, has a big refactor by @KoalaSat where the AppContext has been split into AppContext GarageContext and FederationContext and the logic has been moved into classes in /models . This has improved the situation greatly, however, maybe you guys know how to futher simplify and streamline the state management, ideas? Happy to assign the task if there is a path towards a greener grass :D

[narasimha-1511]

Hey @Reckless-Satoshi , I have good experience working with react and Built great Projects till now . Can I Take this issue up ??

[narasimha-1511]

@KoalaSat @Reckless-Satoshi can you assign me this issue ??