It’s A Matter Of State
Hey girl, what’s your state?
- boyfriend
- no boyfriend
- married to Ryan Gosling (dream state?)
‘State’ is a term that is often thrown around in programming. I didn’t think much about it until we started learning React and Redux, which are entirely concerned with state. Having a solid grasp of state is essential to understanding these frameworks.
State in Programming
In a general computer science sense, state is a snapshot of your program, specifically its values or stored information, in any instance in time.
State isn’t specific to programming; it can simply refer to the present condition of a system or entity. My French fries are hot. The coffee pot is on. The traffic light is yellow. My cat is mad because I won’t feed him third dinner. As with other computing concepts that can get complex, I find it helpful to think back to the general meaning of the word to identify its purpose in a technical environment. State means the same thing in programming except we use it in the context of programming objects – variables, methods, classes, the app itself.
Pure values, or values that don’t change, don’t have state. The number 72 does not have state. Neither does the string “Mary loves cats”. These values will be same in a minute from now or in five years from now (especially my love for cats).
Once you assign these pure values to a system or entity that has its own identity, then you have state. The color ‘blue’ and the model ‘corolla’ don’t have state by themselves, but they can be used as properties to describe the state of my car. Identity is important here, because while there are many blue Toyota corollas in the world, they are, well, different cars, and each has an identity. State also refers to a specific point in time. I want to pimp out my car tomorrow and paint it black with reupholstered velvet seats. The state of my car tomorrow will be ‘black’ and ‘corolla’ and ‘ballin’.
If the values of a property change over time, the state of the entity is mutable. Otherwise, the state is immutable. A common way to store state in programming is through variable assignment. In destructive methods, each assignment operation will replace the one before, but what you are essentially capturing is state – the value of a certain entity in that moment in time.
What Is State in React?
There are two types of model data in React: props and state. Props are immutable (think of the ‘blue’ and ‘corolla’ properties on our car); a component cannot change them. State is mutable – it starts with a default value then undergoes mutations in time, usually due to user input or events. State is an object that sets how components behave. It allows us to define properties and methods that determine what our program will do in any situation and period of time. How fun and convenient!
Finite State Machines
A state machine is a mathematical computation that stores the status of a program or entity at a given time (its current state). The machine can operate on input to change the state – this is known as transition. A finite state machine is defined by a list of its states, including its initial state and the triggering event for each transition. The machine can only be in one state at a time. If an input is received and matches a transition for the current state, the machine changes to the state that transition points to.
Here is a state diagram for a turnstile – it shows its two states – locked and unlocked, as well as two inputs that transition the state – inserting a coin and pushing the turnstile arm.
This can also be presented in a state transition table, showing the new states and the output resulting from each input.
Fun fact: state machines are studied in the more general field of automata theory, which explores abstract machines and the computational problems that can be solved by using these machines. Automata theory includes combinational logic (a type of digital logic that is implemented by Boolean circuits (in contrast to sequential logic – it has no memory)), all the way up to the famous Turing Machine, which can represent the logic of any computer algorithm. Finite state machines are the simplest member of automata theory data structures.
React was modeled after finite state machines – after all, React components are just little state machines. You update a component’s state and then render a new user interface based on that component’s new, or present, state. The React docs advise to keep as many of your components as possible stateless, therefore isolating the logic of state to its proper places and omitting redundancies.
State machine tools have their place in programming theory and are present in many programming languages to implement event-driven code. Ruby has a State Machine gem that sets a state machine as an attribute on a Ruby class. This is a popular alternative to creating multiple Boolean values and managing a class’s behavior based on those values. JavaScript has a Finite State Machine micro-framework that you can include in your web application.
State machines are also popular in game development, for example, controlling a character’s behavior based on user input (if user presses ‘b’ on the controller, our heroine needs to jump), or implementing the AI of an enemy or attacker, with each state representing an action like shoot, attack, find aid, etc.
