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 Catalogue: xstate-catalogue.com
XState Crash Course: Coming Soon
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:36 - How XState Works
04:07 - XState Code Example
#XState #WDS #StateMachine

[@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.

[@mrbhaskarn]

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

[@khoinguyen-ft2ys]

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

[@cacup7]

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 kzbin.info/www/bejne/rZi6qH2Jo82aerc Also recomend reading about finite state machine in game development, that you'll have good insights for front components dev.

[@Edu4Dev]

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 !

[@sanathkumaru6358]

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

[@1Chitus]

We most def do appreciate you broski you do a great job breaking things down 💪🏽

[@guanboyang]

This looks amazing! Definitely would give it a try. Thank you, Kyle 😌

[@JulianColeman03]

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

[@bazz6932]

Yeah will love this too

[@joeydante2409]

Bro, thank you very much for all the content you share, your channel is the best for react and js, this is very interesting, try to take a little course on this.

[@Rider0fBuffalo]

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.

[@jasontruter4981]

“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…)

[@luxsasha]

yep

[@dnkreative]

That's actually two different states these libraries are managing. The term state is confusing and actually means several different things. The FSM however could be also done via redux and co.

[@shaajiiii]

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

[@user-hn1ph6ry8l]

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.

[@fabianramirez3222]

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.

[@hojdog]

Yeah, I hate it. Perhaps it’s useful in more complex examples, but this is ultimately just makes code unreadable. Is it possible to do everything in XState, or are there limitations to what you can do with it?

[@eduingarciacordero9255]

@@hojdog in my experience I was adding a lot of loginc to a map that becames impossible to maintain. Every time that I need to add login to that was painfull with redux and redux saga. But with xstate all the complex logic was reduced to almust 0.

[@Shulkerkiste]

Do you guys have any suggestions for this kind of state management in Vue.js? Especially for authentication and API requests.

[@CottidaeSEA]

"If the only tool you have is a hammer, it is tempting to treat everything as if it were a nail." People tend to blind themselves with these tools. They have something simple they want to do, but they overcomplicate things by using tools that aren't necessary for the job.

[@elliotsayes8446]

If you think this is supposed to be a replacement for react-query then you are missing the point. The point is to implement bespoke logic. XState really shines the more complex the logic becomes, but once you are already familiar with it, there is nothing wrong with using it for simpler logic.

[@gautambedi591]

Looking forward for the next 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.

[@BarcelonaMove]

I'm very interested in that future video on xstate :)

[@luizdeveloperbr]

Awesome lib, starting use right now

[@satishb4945]

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

[@simplygenius4847]

Thanks so much

[@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

[@nicolashumbert8344]

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!

[@403gtfo]

Visualizations for the win!!! Very nice.

[@hannad]

Massive respect for react-query now

[@nithinbhandari3075]

Hi, What do you think about Recoil or Jotai ?

[@hakuna_matata_hakuna]

awesome video , could you make a video on offline first with indexedDB with backgound sync to remote ?

[@edycole5543]

thanks kyle, how about implementation in react and use case?

[@arafatrifat3655]

Hi, I hope you’re doing good. I would be glad if you make whole course on xstate machine

[@mikedotgold]

Would love to see a simple example app with XState and the T3 stack.

[@Zagoorland]

How it compares to jotai and zustand?

[@michaelcole5371]

Is it worth using this in conjunction with storybook?

Please do an example with React and, if possible, TanStack Query! That would be awesome!

[@user-ok6zx6ui5z]

Thanks, great work!. Could you create a tutorial using XState and React Query in a real app example? I don't know how manage states when react query refetch data automatically? I have an App use react-query via hooks and manage some ui (like: loading progress bar) from react query but how can I move this to integrate with xstate?

[@yousseframy7154]

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?

[@dontqsy5101]

I think so, a state machine can be simple or complex, in the case of a small project we would have simple state machines, and if tomorrow the project grows, scaling the logic of the state machines would be relatively simple and the expected behavior would be clearly defined.

[@IvanRandomDude]

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

[@sobrevivendo-no-front]

It's really awesome.

[@necromaster3154]

Hi kyle amazing content It would help me and lots of people if you make video about advanced tables in react like sorting paging filters every app has it

[@Peter-yd2ok]

Can you recommend a good global state management library that can be used in nextjs for ssr?

[@peterszarvas94]

It's literally what's the video about

[@PRASHANTSINGH-dr6ow]

Thanks Kyle for the amazong explanation, can you please add the github repo link for the project.

[@KeksBln]

Wie kann man im Kalender in der Wochenansicht (5-Tages-Ansicht) den aktuellen Tag, also die ganze Spalte, highlighten lassen? Früher ging das (z.B. gelber Hintergrund), seit vielen Monaten geht das dummerweise nicht mehr. In deinem Video sehe ich einen dünnen blauen Rahmen um den aktuellen Tag, das wäre ja auch okay. Aber ich finde nirgends eine Option dazu, auch bei den Regeln habe ich nichts Passendes gefunden, außer die abgelaufenen Termine ausgrauen zu lassen, was aber mit sich wiederholenden Terminen nicht funktioniert. Vielen Dank!

[@amritkahlon1988]

Hey can you show how to do them in typescript?

[@pallavggupta]

Love your videos and your work, Can you please also make videos on Astro or astro v react or Astro with react

[@sabasayer]

I like how xstate tries to simplify state management with state machines. I am just not sure if it is worth to use for every component. I think it would be better for something like a game that has a lot of complex state management is required.

[@jemjem8902]

Will it work with remix?

[@dashawk]

This looks like a step function, in a cool way.

[@merotuts9819]

This looks like Redux Dev tools, do these two libraries share this state machine concept?

[@babasaly1]

Hello Kyle, Thank you for the amazing videos. I wonder what your thoughts are about next.js for the server+client solution? and/or do you prefer something else?

[@karlisbroders]

Would you use Xstate with react-query?

[@AlexFord]

Is there actually a follow-up video or did we just plug one and it hasn't actually been made?

[@chrishabgood8900]

Nice, state machine comes to js. Been doing this in rails for 15 yrs.

[@JEsterCW]

im glad that nobody does care about rails in 2k23 kekw

[@CodingAbroad]

Rxjs is where it’s at!

[@SIVA-Mycount]

Looks good. But it's hard to understand the code and it's huge. Anyway thanks for the update. 👍

[@simpingsyndrome]

cameback here after 5 months waiting a full tutorial of xstate :)

[@sanjarcode]

I'd be happy even it if engineers documented the flow using the editor, even if not using it to generate code.

[@Shulkerkiste]

The last 3 characters of this URL are forming VUE :D

[@abeechr]

Do this tutorial with React please!

[@kstash3564]

I think this (kzbin.info/www/bejne/fpe9dJadbsRmqpo) is a better first-example to showcase the power of state charts, rather than a contrived fetch. Here, you see (1) a clear separation between business logic (state machine) and declarative ui (jsx) (2) a lot of logic like "can I click this when in xxx state" is no longer required, as the library can infer that from the state machine. The UI side just uses APIs like `can`, as shown in the video. If you have a crazy amount of `useState` and it is being set all over the place, this is a better alternative, at the expense of having to learn the syntax.

[@shawn-skull]

Waiting for application project samples.

[@zebramc3620]

Can XState used in React Native？

[@kimbapslayer1995]

Sorry but this example seemed so complicated lol. And the “simple” fetch request looked insanely convoluted. Never seen it done like that.

[@fyfirman]

Exactly! Even simple `useState` hooks seems easier than this, imo.

[@kulyog6626]

Once you are working with it you'll like it.

[@TheBswan]

@@fyfirman useState is just a stateful value and setter function. Xstate is for configuring complex state machines. It's more like useReducer with an opinionated interface. State libraries like xstate become more important in larger applications.

[@whosgrshh2596]

You wouldn't use a state machine to handle if a button was clicked or not. States machines can simplify complex logic needed for switching between and keeping state in an app. Its another way of saying "I will change into [someState] when [someConditions] are met."

[@hermana1016]

It’s simple to people who have used state management editors before like in Unity 3D and other programs

[@harpo187bling]

Please do a recoil example

[@dawidwraga]

Video about Zustand please?

[@Sjon_E]

This is looks very interesting but I can see this becoming very hard to read in bigger state machines.

[@ivankraev4264]

Hi, how is this better than redux toolkit ?

[@stevebarakat6968]

From what I understand, Redux's actions are triggered by events and X-State's actions are triggered by state changes. So Redux is like "Do this..." and X-State is like "Do this after this...". It focuses on the transitions between states which makes it more powerful.

[@climatechangedoesntbargain9140]

@@stevebarakat6968 I guess it doesn't integrate very well with ngrx

[@hunterbertoson156]

Take a shot every time kyle says “State”

[@TheBartePL]

Hey Kyle, In the actions you are mutating context and that is something that you should avoid. You can find it in the docs Instead of: increaseRetryNumber: context => (context.retries += 1), you should do: increaseRetryNumber: assign({ retries: context => context.retries + 1 }),

[@toblamabor7072]

The video is missing at 12:03 bro

[@projectsnik305]

How about using Redux?

[@ardianhotii]

I want to see it on a real full stack MERN application or something

[@user-gt2gy8wo3h]

here is how I would've done this in a much simpler way using OOP concepts; have a class that handles your calls to your back-end APIs with optional retry properties and offers you events you could register to having each event passing you an event object carrying all the helpful information you needed to handle whichever logic you wanted to handle. You could have the error event caller handing you an event object carrying information about the number of attempts it did so far while allowing you to pass a message back to the event caller telling the class to stop retrying or continue retrying after n amount of sleep, or whatever other logic you'd like to have the caller method do next. The problem today is it's very difficult to convince javascript developers to ever attempt learning OOP properly. So they ended up, in 2023, attempting to come about doing something so simple and basic in OOP 20+ years ago in a such a convoluted round-about way. here is a sample of what your error event handler would look like: function onError(ev) { console.log(ev.errorMsg); // do any logic you want (e.g. show msg to user, etc..) if (ev.retries>3) { ev.stopRetry = true; } } and here is how you use the API class const apiCaller = new MyCustomApiCallerClass(); apiCaller.event("error", onError(ev)); apiCaller.Post("your uri goes here", headersObj, postParams, anythingElseYouWant); ^ the above is a sample for onError, you could do the same for success, or any other event in the lifecycle of whatever you're building. Note: you can either implement your own Event class that you can reuse inside other classes (event class is just a class that maintains a list of callbacks for each event name) or use EventEmitter.

[@d.sherman8563]

While I think something like xstate adds more complexity than it’s worth for 95% of web usecases, OOP has never been the only option in any domain. More functional oriented approaches and languages have been around and widely used since before OOP even existed. Using an OOP approach is fine but in no way superior. There are many examples to be given where a purely OOP approach adds unneeded complexity and strange abstractions that functional languages don’t need.

[@doc8527]

​@@d.sherman8563 at least from his example, it will generate unnecessary complexity for the entire codebase and make the API calling annoying without any benefits from a fast iteration web development perspective. OOP is surprisingly good if everything is set (like a game or something that doesn't require rapidly change) or already gain large amount of prerequires before you even built it because you know how to abstract it in a certain degree without trying to guessing the rest. Ppl claim good engineers can abstract everything well but it's more like a survival bias for me, they abstract well because they abstract terribly before for the similar question. You don't want to be that abstract terribly case anyway if you work on that codebase. But it doesn't mean OOP is bad, we can still get some sort of ideas from OOP and apply them into functional programing or whatever it's to suit the practical needs. Like what XState does. You know why I said that, it's because in one of projects I had worked on, we applies that OOP concept into our api callings similar to the OP claims, it's not bad, but it isn't good either. It generates tons of unnecessarily complexity and lost tons of flexibilities, code is really hard to track after layers of abstractions along with typescript. Ultimately, it doesn't solve the UI state rendering issue without further abstraction, some of the annoying issues that XState can solve for front lib like React. It's far worse than without using OOP at all from the beginning, the abstraction is initially amazing but it will slowly degrade due to complex business needs, that's just how naturally thing evolve, guess what, OOP causes more troubles to do refactor. Like you said eventually, those so called OOP "benefits" in fact do not come with the nature of OOP itself, we can still achieve it with FP, with less complexity and better flexibility, at least in this case.

[@girishnakate5014]

Please loopback 4 mongodb microservices tutorial

[@djblast101]

Finite state machine nice to see some game dev concepts to the web world.

[@elyasmohammadi3163]

Great video, but if you could share the code too, it would be even more amazing, thanks.

[@7heMech]

Wouldn't it affect performance?

[@TheBartePL]

if you use it correctly, no ;)

[@GilbertoDiaz-fr9pt]

where is the full tutorial?

[@WebDevSimplified]

I am still working on it as it is quite involved

[@sahilaggarwal2004]

I see that XState is very helpful in plain JS. But I use React currently, so should I stick to something like redux or switch to XState for complex state management?

[@sirsuer6726]

You should try zustand.

[@sahilaggarwal2004]

@@sirsuer6726 is that another state management library?

[@joshandromidas]

Yup! Super simple and easy to use. Doesn’t even require wrapping your whole app in a component either, it’s really nice.

[@albertyumnam1765]

Zustand is awesome ( you can also try jotai if your project is small )

[@sahilaggarwal2004]

Thanks for the suggestion guys! I will definitely try zustand

[@holycrimpsauce]

Just missed their new docs.

[@dnkreative]

After more than 50 years webdevs adapt technology which actual programmers used for ages )

[@rishiraj2548]

👍👍

[@saeedatenzi]

It is pretty much like bloc on a smaller scale.

[@VEOdev]

I'm a game developer, and man, states are the pain in making games, specially complex games

[@DevDanIO]

I like the idea of xstate just like I like the idea of redux, I just hate the implementation. Overly complicated like a lot of these comments have pointed out. Zustand FTW

[@NytronX]

Please use Dark Reader browser addon, the last thing we want to do is stare at a pitch white background which is the case in most of your videos.

[@blarvinius]

Far out!

[@jamshediqbal7936]

I would not recommend using it if we are using frameworks like React. XState might be useful in some rare scenarios but it is over engineered for most cases. .

[@WyzrdCat]

State management is used on like 1 out of 100 projects. Modern front end devs are nutjobs.

[@csy897]

I like x state but it’s way too verbose. I haven’t used it before but I’d expect no auto suggestions on what options there are and that’s quite inconvenient too

[@pixiedev]

Btw in nuxt 3 you don't have to have any library for state management just use useState with composables dir and done 👍🏻

[@YuriiKratser]

Redux is the best one!

[@UliTroyo]

Redux and XState have overlapping but different use cases… both can manage application state, but XState (and state charts in general) solve UI state more succinctly.

[@YuriiKratser]

@@UliTroyo try to find job with the knowledge of XState! It's good for pet projects. You'd better learn AWS.

[@nithinbhandari3075]

Hi, What do you think about Recoil or Jotai ?

[@hendrywilliam]

@@nithinbhandari3075 Redux still the king

[@_CazaBobos]

Redux isn't the best one, though its one of the oldest and most used, wich isn't the same. Redux can sometimes be overkill for simple state managements where you simply don't need it, and simpler alternatives like zustand just do a better job. Besides, Redux is still being used a lot more than other alternatives, but it's growth is in declive and in many cases other options are being chosen over it for new projects.

[@widibaka7058]

i cant ... after all this time.....

[@shazaq3682]

1st!!! under 1 min

[@thehalasoft]

Hello from 🇵🇰.

[@ryanfang3413]

In the first 10 comment lets go

[@12pseudonym]

This video was complicated 😢

[@lucasstark]

Actually, the hardest thing about programming is cache invalidation and naming things.

[@essamal-mansouri2689]

This adds too much complexity for very little in return. A lot of this can be modeled as a reducer instead.

[@trappedcat3615]

A library with state machines? Why not use a vanilla factory function.

[@nadavbensimon1267]

i dont understand whats the point of the libary ,all you are doing is making a simple fetch request and either get an error or something,why do you need state mangent for that thing and why this thing suppose to be better then redux.

[@troy5370]

Who puts a FSM library in the middle of their web app and calls it simple? First, you have to learn the entire syntax of this library, the vocabulary, and the structure. Did I mention a bunch of boilerplate code and having to find the code littered all over the place. You know what is not simple? This. Developers, just go use Zustand it actually is simple, does the same thing in 3-4 lines of code, doesn't require this learning curve, and doesn't put gibberish in the source to ignore that is used for a WYSIWYG lol.....