This is an excerpt from my 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:
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:
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:
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:
Even updating the DOM is a side effect, because those changes are persisted.
There are a few reasons why side effects are bad, especially when they are in computed props:
And all of these make it harder for us later on when we're splitting up our components.
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.
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!
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!
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.
You can also find out more about the course here.