React Etkinlik Yönetimi Rehberi

Bir düğmeye tıkladığınızda tüm web sayfanız yeniden mi yükleniyor? Yazarken giriş kutunuz durumu (state) güncellemeyi mi bırakıyor? React'ta etkinlikleri doğru şekilde yönetmezseniz bu sorunlarla karşılaşabilirsiniz.

Etkinlik yönetimi; tıklama, form gönderme veya değişiklik gibi kullanıcı eylemlerini yakalamak ve bunlara yanıt vermek anlamına gelir. React, SyntheticEvent adı verilen bir sistem kullanır. Bu, kodunuzun Chrome, Safari ve Firefox gibi tüm tarayıcılarda aynı şekilde çalışmasını sağlar.

HTML ve React etkinlikleri arasındaki temel farklar:

  • İsimlendirme: React'ta camelCase kullanın. onclick yerine onClick kullanın.
  • Yöneticiler (Handlers): React'ta bir fonksiyon referansı geçirin. String'ler yerine süslü parantez kullanın.
  • Engelleme: Varsayılan tarayıcı davranışını durdurmak için her zaman event.preventDefault() çağrısını yapın.

React etkinlikleri nasıl yönetir:

React, her bir düğüme (node) dinleyici eklemez. Event Delegation kullanır. Kök öğeye (root element) tek bir dinleyici ekler. Bu, bellekten tasarruf sağlar ve performansı artırır.

Kullanılan yaygın kalıplar:

  • Tıklama Sayacı: Bir kullanıcı bir düğmeye tıkladığında durumu güncellemek için bir fonksiyon kullanın.
  • Form Yönetimi: Birden fazla giriş alanını tek bir fonksiyonla güncellemek için event.target.name ve event.target.value kullanın. Sayfa yenilemelerini durdurmak için form gönderiminde her zaman event.preventDefault() kullanın.
  • Argüman Geçirme: Bir fonksiyona ID geçmeniz gerekiyorsa, bir ok fonksiyonu (arrow function) kullanın. onClick={() => handleDelete(id)} şeklinde yazın. onClick={handleDelete(id)} şeklinde yazmayın, çünkü bu render sırasında hemen çalışır.

Bu hatalardan kaçının:

  • Sonsuz Döngüler: Bir onClick özniteliğinde asla doğrudan bir fonksiyon çağırmayın. Bu, render sırasında bir durum güncellemesini tetikler ve bu da başka bir render'a neden olur.
  • Tanımlanmamış Etkinlikler: preventDefault() çağırmanız gerekiyorsa, fonksiyon tanımınıza her zaman event parametresini dahil edin.
  • Bellek Sızıntıları: Bir useEffect hook'unda window.addEventListener gibi manuel dinleyiciler ekliyorsanız, bunları her zaman temizleme (cleanup) fonksiyonunda kaldırın.

Performans için en iyi uygulamalar:

  • Listeniz çok büyükse, bir .map() döngüsü içinde yeni fonksiyonlar oluşturmaktan kaçının.
  • Yöneticileri (handlers) alt bileşenlere aktarırken useCallback hook'unu kullanın.
  • Uygulamanızın hızlı kalması için özel etkinlik dinleyicilerini temizleyin.

Etkinliklerde ustalaşmak, etkileşimli React uygulamaları oluşturmanın anahtarıdır.

Kaynak: https://dev.to/banti_kevat_8e2d123bb7994/react-me-events-handling-complete-guide-2p69