Skip to content

Instantly share code, notes, and snippets.

@jbranchaud

jbranchaud/A-threads.md

Last active May 4, 2021 21:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jbranchaud/3f1f8a779b7bc0787ee032609d8134fb to your computer and use it in GitHub Desktop.
Save jbranchaud/3f1f8a779b7bc0787ee032609d8134fb to your computer and use it in GitHub Desktop.
Download ZIP
Painstorming: State Management with XState
Raw
when-to-use-react-state-and-when-to-use-xstate-context.md

When to use react state and when to use XState context?

https://spectrum.chat/statecharts/general/when-to-use-react-state-and-when-to-use-xstate-context~e32d06e2-3389-4228-9fa9-e5df745871e6

4/21/2021

Jargon

  • React State
  • Performance
  • Persist state, state persistence
  • Hierarchical / Parallel

Painstorming

OP

"I'm busy introducing myself to xstate" — is there a lot to learn? Is it unintuitive?

"What UI state should go in xstate vs just in React state?"

Confusion about how to best use xstate or about how it interacts with React state management.

"What is the difference?"

"What is the performance difference?"

"I've made the wrong decision on this enough times."

"I can give advice now that I've had to go back and change this times before."

You have to learn this the hard way?

"Do parts of the page outside of this component need to know about state inside this component in order to behave correctly?"

Gives examples of different kinds of components/forms with different needs.

Persisting state

The poster lays out two options:

  • Keep the state all in one place, less to think about, the data all the flows the same way.
  • Push specific state down to where it is needed, you have to think about more places where the state could be, but it is easier to extend and modify your design in the future.

"What state would be convenient here?"

"What state would make sense here?"

Asking these questions will, "over time, help you build the enactive knowledge you need" to do what is right. — more learning over time by trail and error.

Figure out where state is needed, figure out the dependencies between state and other app logic — once you know this, you can make a decision about where it belongs.

"Ad-hoc logic that exists in random places" rather than "centralized places that can be managed."

Ad-hoc state is harder to manage.

"Many times it's impossible to 'control state' instead of XState"

I'm thinking of a rewrite where "I break all of the core app modules into separate machines." — rewrites are hard, something about the current state management is enough of a mess that this person is looking for a wholesale fix.

Multiple machines, how to design and architect this? Nest a bunch of machines inside a main app machine?

"How to share context between separate machines?"

"How to subscribe all affected react components to changes when updates occur?"

"Is business logic involved?"

Several posters are referencing rules of thumbs — again, it seems hard to know when to do what with state, hence the need for guidelines.

"Let xstate do the heavy lifting." — implying that React state isn't as well suited.

Organizing your state within this recommended mindset leads to "dev workflow becoming faster, easier to debug and test, and better yet, all biz logics are nicely encapsulated within xstate."

The pains in this (by inversions) are, when you don't have a solid mental model for your state and where it belongs:

  • dev workflow is slow
  • hard to debug
  • hard to test
  • biz logic is not nicely encapsulated, biz logic is spread everywhere

"Delegate work to separate machines that communicate with each other."

"Getting used to this method of thinking around applications."

"How do you use the invoked services to 'pass context' around?"

"What is the standard way to do these things before I apply my creativity?" — there is a lot of flexibility

Doubt that I will use the tool correctly.

"What's the difference between hierarchical and parallel communication between machines?"

"Do I need the hierarchical approach in order for the machines to be able to communicate?"

"Should the child machine send state updates to the parent or can the parent request the update when needed?"

Push-based vs. Pull-based.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment