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: `
      @if (showGreeting()){
          <app-greeting />
      }
    `
})
export class HomeComponent {
    showGreeting = signal(false);
}

This is all our application does. It just displays a greeting component based on whether 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: `
      @if (showGreeting()){
          <app-greeting />
      }

      <button (click)="toggleGreeting()">Toggle</button>
    `
})
export class HomeComponent {
    showGreeting = signal(false);

    toggleGreeting(){
        this.showGreeting.update((showGreeting) => !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 are 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).