This is an excerpt from my upcoming course Clean Components. You can learn more about it here.

It is the intro to the newly added Module 2 — Side Effect Surgery.

Computed properties in Vue should never have side effects. But it's really easy to accidentally add them in.

In this lesson we'll cover these topics:

  • What is a side effect?
  • Side effects are problematic
  • Side effects are like taxes

After that, the rest of this module is focused on how to clean up and remove side effects from your computed props. We'll look at the three main ways side effects sneak their way in:

  • Lesson 2.1 — Updating component state
  • Lesson 2.2 — Mutating an array
  • Lesson 2.3 — Calling methods

What is a side effect?

A side effect is the modification of state, whether it's component state or global state.

You can also think of it as when a function does something that affects more than just that function. Instead of just returning a value, it changes the application in a way that lasts well after the function is finished.

For example, this sum function has no side effects:

function sum(a, b) {
  return a + b;
}

All it does is return a value, and nothing else.

This function that sets the new name of a video, however, has a side effect:

function changeName(name) {
  this.video.name = name;
}

This is a side effect because this.video.name lives in the component, not just this specific function. Updating it affects the entire component.

Side effects can also include things like:

  • Fetching data from a server
  • Writing to local storage
  • User interaction

Even updating the DOM is a side effect, because those changes are persisted.

Side effects are problematic

There are a few reasons why side effects are bad, especially when they are in computed props:

  1. Code is more difficult to understand
  2. It breaks the conceptual model of computed props
  3. Refactoring becomes more challenging

And all of these make it harder for us later on when we're splitting up our components.

Code is more difficult to understand

When you're trying to understand why your application is behaving in a certain way, the first thing you do is look to see how the state is being updated.

But if you have side effects in your app, those updates could be coming from anywhere!

If you have other functions that can modify any part of the application, you now have to look across your entire codebase in order to understand a single piece of it.

However, if you've been diligent in removing as many side effects as possible, you don't have this problem. The number of places that can modify a piece of state is very small, so you don't have to go searching.

It breaks the conceptual model of computed props

When computed properties have side effects, it breaks the conceptual model of how they work.

Most of the time we think of computed properties as being single values that will update themselves automatically. We aren't expecting that they will do anything else.

So when they have side effects, it's unexpected and confusing for other developers (or your future self).

But it also makes it more difficult to refactor!

Refactoring becomes more challenging

We want each piece of code to be as self-contained as possible, so in the future we can move it around more easily. Side effects mean that this code reaches into other parts of the component.

It is no longer self-contained.

If we want to put a computed prop with side effects into a different component, we have to be very careful that the side effects still work properly — not always the easiest thing to do!

Side effects are like taxes

I have to make this very clear though.

Side effects are absolutely necessary in every application.

You can't avoid them or get rid of them entirely.

What we're trying to do here is manage them and reduce their negative effects on our code.

They're a bit like taxes. Without taxes no country could survive, but at the same time we don't want to pay more than we need to.

Stay tuned for more excerpts and teasers from the course as we get closer to the launch date!

You can also find out more about the course here.