# What is state?

<div class="Box-body readme blob p-5 p-xl-6 gist-border-0" id="bkmrk-this-article-was-ori"><article class="markdown-body entry-content container-lg"><p class="callout info">This article was originally published at [https://gist.github.com/joepie91/8c2cba6a3e6d19b275fdff62bef98311](https://gist.github.com/joepie91/8c2cba6a3e6d19b275fdff62bef98311). </p>

"State" is data that is associated with some part of a program, and that can be changed over time to change the behaviour of the program. It doesn't have to be changed by the user; it can be changed by *anything* in the program, and it can be *any* kind of data.

It's a bit of an abstract concept, so here's an example: say you have a button that increases a number by 1 every time you click it, and the (pseudo-)code looks something like this:

```javascript
let counter = 0;
let increment = 1;

button.on("click", () => {
	counter = counter + increment;
});
```

In this code, there are two bits of "state" involved:

1. **Whether the button is clicked:** This bit of data - specifically, the change between "yes" and "no" - is what determines when to increase the counter. The example code doesn't interact with this data directly, but the callback is called whenever it changes from "no" to "yes" and back again.
2. **The current value of the counter:** This bit of data is used to determine what the *next* value of the counter is going to be (the current value plus one), as well as what value to show on the screen.

Now, you may note that we also define an `increment` variable, but that it isn't in the list of things that are "state"; this is because the `increment` value *never changes*. It's just a static value (`1`) that is always the same, even though it's stored in a variable. That means it's *not* state.

You'll also note that "whether the button is clicked" isn't stored in any variable we have access to, and that we can't access the "yes" or "no" value directly. This is an example of what we'll call *invisible state* - data that *is* state, but that we cannot see or access directly - it only exists "behind the scenes". Nevertheless, it still affects the behaviour of the code through the event handler callback that we've defined, and that means it's still state.

</article></div>