Ek bilgiler
useEffect Nedir, Ne Zaman Kullanılır ve Ne Zaman Gereksizdir?
useEffect bazen gerçekten hayat kurtarır ancak geliştiricilerde zamanla refleks haline gelen ciddi bir alışkanlık yaratabiliyor. "Şu değişince bunu yap, bu olunca şunu tetikle" mantığıyla her state değişimini useEffect ile yakalamaya çalışmak gereksiz render döngülerine ve karmaşaya yol açar. Örneğin, bir öncelik filtrelemesinde state'in asenkron doğasını yönetmek için hemen useEffect'e sarılmak yerine, değişen güncel değeri doğrudan event handler içinde hesaplayıp filtrelemeyi anlık uygulamak çok daha temiz ve performanslı bir çözümdür.
useEffect'in temel çalışma prensibini çok iyi kavramak gerekiyor. Bağımlılık dizisi (dependency array) tamamen boş bırakıldığında içerideki fonksiyon yalnızca bileşen ilk yüklendiğinde (mount anında) bir kere çalışır. Köşeli parantezler içerisine belirli değişkenler eklendiğinde ise sadece bu değerler güncellendiğinde tetiklenir. Bileşenin yaşam döngüsü dışındaki dünyayla iletişim kurarken, asenkron işlemlerde veya verileri localStorage gibi harici sistemlerle senkronize ederken useEffect biçilmiş kaftandır; ancak türetilebilir state durumlarında kesinlikle uzak durulmalıdır.
Geliştirme yaparken salt işlevselliğe değil, semantik HTML ve erişilebilirlik (a11y) standartlarına da dikkat etmek şarttır. Tıklanabilir alanlar için span etiketi kullanmak yerine doğrudan button tercih edilmelidir. Ekran okuyucu (screen reader) kullanan ve görme engeli bulunan kullanıcılar, klavye navigasyonunda veya odaklanma anında bu elemanın etkileşimli bir buton olduğunu ancak bu sayede anlayabilirler. Küçük görünen bu semantik tercihler, kullanıcı deneyimini ve kod kalitesini doğrudan yukarı taşır.
📌 Hatırlanması Gereken Temel Noktalar (Takeaways)
- Gereksiz useEffect Kullanımından Kaçınma: Her state değişimini izleyip başka bir state güncellemek yerine, hesaplanabilir veya event esnasında çözülebilecek işlemleri doğrudan fonksiyon içinde ele almak gerekir.
- Boş Bağımlılık Dizisi (Mount):
useEffect bağımlılık dizisi [] boş bırakıldığında kod yalnızca bileşen DOM'a ilk basıldığında bir defa çalışır.
- Bağımlılığa Göre Tetiklenme: Köşeli parantez içerisine yazılan değişkenler her değiştiğinde effect fonksiyonu yeniden tetiklenir ve senkronizasyon sağlanır.
- Harici Sistemlerle İletişim: Veri çekme (fetch),
localStorage kayıtları ve asenkron yan etkiler (side effects) useEffect'in asıl varoluş sebebidir.
- Erişilebilirlik ve Semantik Buton Kullanımı: Tıklanabilir etkileşimlerde
span yerine semantik <button> kullanmak, ekran okuyucular ve klavye erişilebilirliği için vazgeçilmezdir.
📚 Ek Kaynaklar ve Derinlemesine Okuma Önerileri (Ek Bilgi)