Side Effect Nedir?

Programlamada side effect (yan etki), bir fonksiyonun değer döndürmenin ötesinde dış dünyayı etkilemesidir: DOM'u değiştirmek, bir API'ye istek atmak, zamanlayıcı kurmak, localStorage'a yazmak ya da global bir değişkeni güncellemek gibi. Vue.js'de yan etkiler, reaktif durum değiştiğinde ya da bileşen ekrana geldiğinde çalıştırılan bu tür işlemlerdir.

Yan etkiler nerede çalıştırılmalı?

• Template ve computed içinde değil: computed fonksiyonları yalnızca bir değer hesaplamalıdır. İçlerinde istek atmak veya başka bir durumu değiştirmek beklenmedik döngülere ve hatalara yol açar.
• watch / watchEffect: Reaktif bir değer değiştiğinde yapılacak işler için kullanılır (ör. arama kutusu değişince API'den sonuç getirmek).
• Yaşam döngüsü kancaları: Bileşen ekrana geldiğinde yapılacak işler onMounted içinde, temizlik ise onUnmounted içinde yapılır.

Temizlik (cleanup)

Kurulan her yan etki, bileşen kaldırıldığında ya da etki yeniden çalışmadan önce temizlenmelidir; aksi halde zamanlayıcılar ve olay dinleyicileri birikerek bellek sızıntılarına yol açar.

import { createApp, ref, watchEffect } from 'vue';

createApp({
  setup() {
    const seconds = ref(0);
    const running = ref(true);

    // Yan etki: running true olduğunda bir zamanlayıcı kurar
    watchEffect((onCleanup) => {
      if (!running.value) return;
      const id = setInterval(() => seconds.value++, 1000);
      // Etki yeniden çalışmadan veya bileşen kaldırılmadan önce zamanlayıcıyı temizle
      onCleanup(() => clearInterval(id));
    });

    return { seconds, running };
  },
  template: `
    <p>Geçen süre: {{ seconds }} sn</p>
    <button @click="running = !running">{{ running ? 'Durdur' : 'Devam et' }}</button>
  `,
}).mount('#app');

Bu örnekte zamanlayıcı bir yan etkidir. onCleanup sayesinde "Durdur" düğmesine basıldığında zamanlayıcı temizlenir; "Devam et" ile yeniden kurulur.

Özetle yan etkiler kaçınılmazdır; uygulamaların asıl işi çoğunlukla onlarla yapılır. Önemli olan onları doğru yerde (watch, watchEffect, yaşam döngüsü kancaları) çalıştırmak ve her zaman temizlemektir.