Efeito colateral
Você pode pensar nisso como quando uma função faz algo que afeta mais do que apenas essa função. Em vez de apenas retornar um valor, a função altera o aplicativo de uma forma que permanece após a conclusão da função.
Cuidados com efeito colateral
Você pode pensar nisso como quando uma função faz algo que afeta mais do que apenas essa função. Em vez de apenas retornar um valor, a função altera o aplicativo de uma forma que permanece após a conclusão da função.
Por exemplo, esta função de soma não tem efeitos colaterais:
function soma(a, b) { return a + b; }
Tudo o que ele faz é retornar um valor e nada mais.
Já essa função que define o novo nome de um vídeo, porém, tem um efeito colateral:
function changeName(name) { this.video.name = name; }
Este é um efeito colateral porque this.video.name reside no componente, fora desta função específica. A atualização afeta todo o componente.
Os efeitos colaterais também podem incluir coisas como:
- Buscar dados de um servidor
- Salvar no armazenamento local
- Interação com o usuário
- Até mesmo a atualização do DOM é um efeito colateral, porque essas alterações são persistentes.
Os efeitos colaterais são problemáticos
Existem algumas razões pelas quais os efeitos colaterais são ruins, especialmente quando estão em adereços computados:
- O código é mais difícil de entender
- Quebra o modelo conceitual de adereços computados
- A refatoração se torna mais desafiadora
E tudo isso torna mais difícil para nós mais tarde, quando estamos dividindo nossos componentes.
É mais difícil de entender a intensão do código
Quando você está tentando entender por que seu aplicativo está se comportando de uma determinada maneira, a primeira coisa que você faz é verificar como o estado está sendo atualizado.
Mas se você tiver efeitos colaterais em seu aplicativo, essas atualizações podem vir de qualquer lugar!
Se você tiver outras funções que podem modificar qualquer parte do aplicativo, você precisará examinar toda a sua base de código para entender uma única parte dela.
No entanto, se você foi diligente em remover o maior número possível de efeitos colaterais, não terá esse problema. O número de lugares que podem modificar um pedaço de estado é muito pequeno, então você não precisa se procurar.
Quebra o modelo conceitual
Quando as propriedades computadas têm efeitos colaterais, isso quebra o modelo conceitual de como elas funcionam.
Na maioria das vezes, pensamos em propriedades computadas como valores únicos que se atualizarão automaticamente. Não esperamos que eles façam outra coisa.
Então, quando eles têm efeitos colaterais, é inesperado e confuso para outros desenvolvedores (ou para você no futuro).
Mas também torna mais difícil refatorar!
A refatoração se torna mais desafiadora
Queremos que cada pedaço de código seja o mais autocontido possível, para que no futuro possamos movê-lo com mais facilidade. Os efeitos colaterais significam que esse código atinge outras partes do componente.
Não é mais autossuficiente
Se quisermos colocar um suporte computado com efeitos colaterais em um componente diferente, temos que ter muito cuidado para que os efeitos colaterais ainda funcionem corretamente - nem sempre é a coisa mais fácil de fazer!
Os efeitos colaterais são como impostos
Eles são um pouco como impostos. Sem impostos nenhum país poderia sobreviver, mas ao mesmo tempo não queremos pagar mais do que precisamos.
Eu tenho que deixar isso muito claro, embora devemos evitar os efeitos colaterais, eles são absolutamente necessários em todas as aplicações.
Você não pode evitá-los ou se livrar deles completamente.
O que estamos tentando fazer aqui é gerenciá-los e reduzir seus efeitos negativos em nosso código.