React: State Machines

I went to a networking event this past week and I heard them talk about state machines. I was wondering what it was and they went into detail about it during the presentation so here we go!

I’ll be totally honest, when I first heard of it, I thought it was something about a machine run by the state. Like a secret government ops project.

That is definitely not the case however. State machines are specific to React. React is a powerful JavaScript library built and maintained by Facebook for developing websites and applications. In React, you can create components to mount to the page, and these components contain some sort of state sometimes to hold some data and information about the components.

As your website grows and you have more and more components, it gets hard to track the state of each component. Not to mention doing a live update to all the components at once. This can turn into a real headache at a large scale.

Luckily though, React has resolved this issue with Redux, a library to maintain state by dispatching actions to components to update state at once.

It’s sort of like a Single Source of Truth, which is a better programming practice. By just updating the store in one component, all other components get updated as well. But Lawson, what does this have to do with State Machines? Good question!

State machines are an alternative to using Redux. It does similar things like updating state across components. The difference however is not much. It’s more like a preference of which you’d like to use.

However, I would like to say for the record that Redux is a more popular library, as I’ve been asked about it before in interviews. So for now, I personally will stick to Redux, but give state machines a shot! Maybe you’ll pick it up and like it more than using Redux!

That’s all folks!