Integrating XState with React is something I've thought about a lot, so thanks for putting this together and sharing how you go about it!
It seems like your approach is React plus a bit of XState to replace local state where it's needed. The advantage is that you can write React components and make use of props as normal when using React.
I can see how this approach is a great first step for introducing XState into a codebase, but it seems like it leaves a lot of the power of XState on the table. It's like the 'Actor' part of XState is not really used. For example, because your XState machines only communicate via React, I don't think the Inspector sequence diagram would show events being sent between machines?
Quite related to this, I wonder how you deal with global state with this approach. With XState replacing a useState or a useReducer, do you turn to anything like Context for global state? It seems like XState could work really well to orchestrate state at a global level, not just a component level. Do you have any experience of attempting this?
it leaves a lot of the power of XState on the table
True! But with great power comes great responsibility. Sticking within the guidelines above is a great first step for introducing XState to a codebase.
Context for global state
Yes! This is used in the example above. XState is an amazing tool for orchestrating global state (some of the most important state in your app) because it is so robust. I've used this pattern a dozen times or so in production code.
Integrating XState with React is something I've thought about a lot, so thanks for putting this together and sharing how you go about it!
It seems like your approach is React plus a bit of XState to replace local state where it's needed. The advantage is that you can write React components and make use of props as normal when using React.
I can see how this approach is a great first step for introducing XState into a codebase, but it seems like it leaves a lot of the power of XState on the table. It's like the 'Actor' part of XState is not really used. For example, because your XState machines only communicate via React, I don't think the Inspector sequence diagram would show events being sent between machines?
Quite related to this, I wonder how you deal with global state with this approach. With XState replacing a useState or a useReducer, do you turn to anything like Context for global state? It seems like XState could work really well to orchestrate state at a global level, not just a component level. Do you have any experience of attempting this?
True! But with great power comes great responsibility. Sticking within the guidelines above is a great first step for introducing XState to a codebase.
Yes! This is used in the example above. XState is an amazing tool for orchestrating global state (some of the most important state in your app) because it is so robust. I've used this pattern a dozen times or so in production code.
I totally agree!
Yup for sure, I'm looking forward to it becoming more widely used for this. Thanks for your work!