Redux:
- pros: framework to place different pieces of logic, makes it predictable once everyone is onboarded; boilerplate (actions, reducers, selectors, etc) makes it easier to avoid mistakes if you're not using TS
- cons: boilerplate adds a lot of friction that's not needed if you're using TS; debugging usually requires jumping through more files
XState:
- pros: what I said for Redux but on steroids
- cons: big setup (learning-wise); feels overkill 95% of the time
Context:
- pros: simple to understand and use (you expose values and setters via useContext); minimal setup (Provider and useContext)
- cons: you're still trapped inside React, your logic is inside a big component by default
Mobx:
- pros: keeps your logic out of React by default; you can export your model to another env and debug/test/play easily
- cons: most costly to setup (learning, config) out of all the options (redux with starter toolkit reduces the setup overhead)
I mainly use Context now as I port from Redux. Feeling the pain of not having an interactive model outside of my app views and want to get my team on Mobx.