This Library Makes State Management So Much Easier

State management is one of the hardest parts of developing any application. This is especially apparent as your state and logic grows in complexity. This is why I love XState since it makes handling complex state logic relatively easy. Their visual editor makes it even easier to write and deal with complex state.

📚 Materials/References:

XState Crash Course: Coming Soon

🌎 Find Me Here:

⏱️ Timestamps:

00:00 - Introduction
00:36 - How XState Works
04:07 - XState Code Example

#XState #WDS #StateMachine

[cacup]

I read some comments and I think that people is mixing the concepts.
First: State Machine !== State Management.
Second: You could use both at the same time, no problem.

Let's imagine you have a search input component:
Inside the concept o state machine, the term "state" refers to the current condition of your app, For example
- Search input is empty
- Search input is filled
- Search input is disabled
Each of these state is one of the possible conditions (finite state) that the search input component can have and has nothing to do (directly) with the variable that will store the value atribute of the input or the variable that will store the loading state.

One of the ideas behind using state machine in frontend dev is that you are taking an approach less imperative and more declarative towards the possible state (conditions) of your component may have, that can help you with component testing and avoiding unpredictable situations like infinite loading or unexpected error, for example.

There is a video that is about this libary and explains much better what I tried to mean XD

Also recomend reading about finite state machine in game development, that you'll have good insights for front components dev.

[bobdinitto]

Very interesting. I like the way you can visualize the state transitions and simulate them. That's really helpful in understanding the potential paths through the state machine and identifying invalid states and transitions. I often ponder this while writing code. My current practice is to draw a diagram of the state machine before coding it.

[Elefantoche]

I think state machines using XState are useful, but must be used and applied carefully, as they can make a simple scenario to be a lot more complex to read and maintain.

Taking the video study case as an example, you can easily achieve the same result by wrapping load, reload and retries in a custom hook and using libraries such as react-query. This will produce a more readable result in fewer lines of code.

I would only use state machine if states don't circle back to only two different ones like in the example, instead, I would use them to represent a more complex workflow.

[JulianColeman]

Man, this was super resourceful! I'd be curious to see an example of xstate and react-query, covering the best practices for some real-world retry behavior. Maybe going into detail of how to inform the user they may not fetch again because a maximum fetch failure limit was reached and you must refresh the page in order to re-attempt the request. This can be useful in preventing users from spamming the retry button

[jasontruter]

“The nice thing about x state is it handles all your state and logic in one place”. Heard this many times with 90% of state management libraries (Redux, Mobx…)

[EduDev]

I'm studying this concept since 2009. I create a very disrupt method to teach tech and you are one of mt favorites channels in this path. Thank you. I love State Machine, this is Kabbalah !

[mrbhaskarn]

Thanks Kyle.
Your content really helped me learn web development and get a fulltime job.

[khoinguyen-ftys]

Xstate is very useful for handling complicated state. I look forward to your Xstate crash course. Thank you

[ДмитрийКарпич]

It's absolutely amazing lab! At my full-time job I use XState to re-write (2 or 3 time) complex custom auto-complete "with whistlers" finally with zero errors and no glitches. Yep, it's not simple as it feels should be, but its works and mountable. Thanks for video.

[UliTroyo]

I love XState! Fixing bugs in app transitions is so much easier when all you have to do is rearrange a JS object.

[fahadshovon]

as a 5 years experienced dev, I can say it's extremely complex and it'll be a maintenance nightmare if you centralize all states in a single place

[IvanRandomDude]

0:00 - 0:05 I wish life was that simple

[sanathkumaru]

You are genuine content creator.Greatful to have a teacher like.Thank you making such good content.

[nicolashumbert]

Thanks a lot for this video.

One thing though, I think you should warn beginners/juniors that this type of tech should be used for large and complex applications.

You don't hunt with a bazooka.

Once again thanks for all your content!

[adnanahad]

I have a question, But I don’t know u will understand or not
Qno
If we have eventlistners and we pass args like click and dblclick
Question is how much time its waits for next click if event is for double click…
We have both ‘click’ and ‘dblclick’ on same element
For how much time it will wait for next click if user wants double click
Hope u understand
Thanks

[RiderfBuffalo]

This tool is pretty awesome! Thanks for demo. Yes the demo fetch scenario would be best handled with Polly or Cockatiel J's libraries, but I got the gist of how x state works and I think it will be great for maintains some workflows that my app uses to guide users over several days. Might even use it in transition some windows workflow foundation workflows.

[yousseframy]

I think XState shines in very large projects it will provide a good and clear documentation also but is it worth it on a smaller side projects?

[andrewiglinski]

For those that are confused, I found the solution:

1) Don’t use booleans for options with more than two potential states. Use an enum, a class, or a module with exported strings.
2) completely ignore this.
3) Continue using Redux, or if for some inexplicable reason you want to… mobx.

[satishb]

Waiting for the full detailed video on XState. Please make it asap. Thank you ..

[shaajiiii]

Thanks a lot! I was struggling with xstate. Please do more. A to do app example would be nice.