What is State?

A rock has no state, it is (more or less) an unchanging clump of minerals. A lightbulb can be on or off, it has state. An elevator can be on or off, it can be moving or stationary, it can be on level 5 or level 8, it has a lot of state.

To put it simply, state in your application arises when something can change. Let’s consider a simple example:

@Component({
    selector: `app-home`,
    template: `
        <app-greeting *ngIf="showGreeting"></app-greeting>
    `
})
export class HomeComponent {
    showGreeting = false;
}

This is all our application does. It just displays a greeting component based on whether or not showGreeting is set to true or not. Right now it is hard coded to be false. This application doesn’t really have any “state” because nothing in the application can change. It just does exactly what it was coded to do.

Now let’s add a button to toggle the showGreeting value:

@Component({
    selector: `app-home`,
    template: `
        <app-greeting *ngIf="showGreeting"></app-greeting>
        <button (click)="toggleGreeting()">Toggle</button>
    `
})
export class HomeComponent {
    showGreeting = false;

    toggleGreeting(){
        this.showGreeting = !this.showGreeting;
    }
}

Now the application has state. The showGreeting value can be changed from false to true or vice versa and it will hide or display the greeting as a result. Technically speaking, it doesn’t matter that changing the showGreeting value actually does something, we still have state regardless.

So… what’s the big deal? This might seem like a silly thing to make such a fuss about. Our application can change, obviously, it’s an app! We want it to do things!

Managing state is a task that can be quite straight-forward, but it can also become a nightmare if the application becomes complex enough and an appropriate strategy isn’t being used. One of the difficult things is that there is so many different ways that you can go about managing state. You will find many people have many different opinions on how to best manage state, and you will also find there are many different state management libraries you can use to help you manage state (again, with plenty of people with strong opinions about those libraries).

When does managing state become hard?

Let’s expand on our silly greeting example a little. Right now our application’s state management concerns are quite simple. What if this greeting is not just shown on this one component? What if it is displayed globally in our application?

Now we can’t just store this showGreeting value on our component, the value is going to need to be stored somewhere globally accessible like in a shared service. We could use an observable!