@xstate/react connects XState state machines and statecharts to React, providing a data-management option for applications where state transitions and flow management matter. section 8.0
Use @xstate/react when the data layer should remain replaceable and the application benefits from explicit state-machine modeling.
- Separates presentation from data management so the data layer can change without rewriting the component layer. section 8.0
- Offers a state-machine alternative to useState, useReducer, Redux, RTK, and zustand, trading different complexity and scaling characteristics. section 8.0 section 8.1
- Fits applications where state-machine flow management and built-in data management should work together. section 8.0
Goal-tracking application
Apply @xstate/react to the data layer of a goal-tracking application with list and detail views, while keeping the existing presentation components intact. section 8.1 section 8.0
Figure 8.1 The final goal-tracking application. On the left, you see list view, where all the things are shown, and on the right, you see detail view for a single thing. We’ve been working on our six-packs and completed 12 sessions of core workouts. The songwriting career, however, isn’t going too well.
Inspect the goal-tracking interface used to contextualize the state-management comparison: a list view of goals alongside a detail view for one goal. section 8.1
