Events vs State

I’m racking my brain for how to explain the difference between:

• Updating a bunch of different variables every time a bunch of different events happen, versus…
• Defining the relationships between those variables and letting them automatically update whenever their dependencies change.

What are these patterns called?

Initially, I called it “event-driven” vs “state-driven” variables, but that feels wrong because both are based on events and state.

State Management and Other Patterns

All of this falls under the umbrella of state management, but I haven’t found a really good resource on what “state management” means, its history, patterns, etc. All the top search results basically say “look at React/Redux”.

If I look back at the classic design patterns, two stick out:

• State pattern
• Observer pattern

Observer feels close, but what I’m really looking for is something more like “derived state” or “computed variables”—something that focuses on defining the relationship between variables, on dependencies.

Example Code

I still feel like I’m missing a way to describe the difference between these two chunks of code (using Vue 2 syntax):

{
  data: {
    isActive: false,
    icon: 'arrow-up',
  },
  methods: {
    onClick() {
      if (this.isActive) {
        this.isActive = false;
        this.icon = 'arrow-down';
      } else {
        this.isActive = true;
        this.icon = 'arrow-up';
      }
    }
  }
}

{
  data: {
    isActive: false,
  },
  computed: {
    icon() {
      if (this.isActive) {
        return 'arrow-up';
      } else {
        return 'arrow-down';
      }
    }
  },
  methods: {
    onClick() {
      if (this.isActive) {
        this.isActive = false;
      } else {
        this.isActive = true;
      }
    }
  }
}

Version 1 is how most developers would naturally approach the problem. It’s simple, procedural, makes sense.

Version 2 is more complex, but it gets ahead of the problem where adding more variables and more events becomes more and more complicated to manage. (Note: complex != complicated.)

🤷‍♂️ I’m still looking for a good why to describe this difference.

If y’all have any ideas, let me know!