Merhaba arkadaşlar, bugün başımı çok ağrıtan ve yeni başlayan herkesin mutlaka takıldığı bir konudan bahsedeceğim. React'te bir bileşenin sadece bir kere, yani mount olduğu anda çalışmasını istediğimiz kodları nereye yazacağız? İlk aklımıza gelen, useEffect hook'unu boş bağımlılık dizisi ile kullanmak. Ama işin içine async işlemler, temizlik fonksiyonları ve ESLint uyarıları girince durum biraz karışabiliyor. Gelin bu sorunu nasıl temiz ve güvenli bir şekilde çözdüğümü anlatayım.
Karşılaştığım Sorun
Projede, bir sayfa ilk açıldığında kullanıcının konum bilgisini alıp API'ye bir istek atmam gerekiyordu. Tabii ki bu işlem sadece ilk render'da olmalıydı, kullanıcı butona falan basmıyordu. Hemen useEffect içine yazdım kodumu, bağımlılık dizisini de boş bıraktım. Ama içine yazdığım fonksiyon async olduğu için, useEffect'in dönüş değeri bir temizlik fonksiyonu olması gerekirken, Promise döndürmeye başladı. Hem React bana uyarı verdi, hem de ESLint "Oh hayır, bu fonksiyonu useEffect'in callback'ine koyma, bağımlılıkları eksik!" diye söylenmeye başladı. Kafayı yemek üzereydim.
Temiz ve ESLint Dostu Çözüm
Bu sorunu aşmanın en temiz yolu, useEffect içinde hemen çağrılan bir async fonksiyon (IIFE) tanımlamak ve asıl iş mantığını onun içine almaktı. Bu sayede useEffect async bir fonksiyon döndürmemiş oluyor, sadece onu senkron bir şekilde çalıştırıyor. Ayrıca, eğer işlem component unmount olmadan bitmezse iptal etmek için bir temizlik fonksiyonu da yazabiliriz.
İşte benim kullandığım en temiz çözüm:
Dikkat Edilmesi Gereken Noktalar
Bu yapıyı kullanırken birkaç önemli noktaya dikkat etmek gerekiyor. Birincisi, ESLint (özellikle eslint-plugin-react-hooks) boş bağımlılık dizisi konusunda çok katıdır. Eğer useEffect içinde kullandığınız bir değişken veya fonksiyon component scope'undan geliyorsa, onu bağımlılık dizisine eklemelisiniz. Aksi takdirde uyarı alırsınız ve bu uyarı genellikle haklıdır!
İkincisi, yukarıdaki örnekte olduğu gibi, AbortController kullanmak, component aniden kaldırıldığında (kullanıcı sayfadan ayrıldığında) sürmekte olan API isteklerini iptal etmek için çok önemli bir optimizasyondur. Bu, memory leak ve gereksiz network isteklerini önler.
Peki ya component içinde tanımlı bir fonksiyonu sadece bir kere çalıştırmak isterseniz? O zaman useCallback hook'u ile fonksiyonu memoize edip, bağımlılık dizisine onu ekleyebilirsiniz. Ancak bu, başka bir makalenin konusu.
Siz bu yöntemi kullanıyor musunuz? Ya da React'te bileşen ilk mount olduğunda çalıştırdığınız kodlar için farklı, daha şık bir pattern'iniz var mı? Yorumlarda paylaşabilirsiniz, birlikte öğrenelim!
Karşılaştığım SorunProjede, bir sayfa ilk açıldığında kullanıcının konum bilgisini alıp API'ye bir istek atmam gerekiyordu. Tabii ki bu işlem sadece ilk render'da olmalıydı, kullanıcı butona falan basmıyordu. Hemen useEffect içine yazdım kodumu, bağımlılık dizisini de boş bıraktım. Ama içine yazdığım fonksiyon async olduğu için, useEffect'in dönüş değeri bir temizlik fonksiyonu olması gerekirken, Promise döndürmeye başladı. Hem React bana uyarı verdi, hem de ESLint "Oh hayır, bu fonksiyonu useEffect'in callback'ine koyma, bağımlılıkları eksik!" diye söylenmeye başladı. Kafayı yemek üzereydim.
Temiz ve ESLint Dostu ÇözümBu sorunu aşmanın en temiz yolu, useEffect içinde hemen çağrılan bir async fonksiyon (IIFE) tanımlamak ve asıl iş mantığını onun içine almaktı. Bu sayede useEffect async bir fonksiyon döndürmemiş oluyor, sadece onu senkron bir şekilde çalıştırıyor. Ayrıca, eğer işlem component unmount olmadan bitmezse iptal etmek için bir temizlik fonksiyonu da yazabiliriz.
İşte benim kullandığım en temiz çözüm:
JavaScript:
import React, { useEffect } from 'react';
import { fetchInitialData } from './api'; // Dışarıdan bir async fonksiyon
function MyComponent() {
useEffect(() => {
// AbortController ile isteği iptal etmeyi sağlayalım
const controller = new AbortController();
const signal = controller.signal;
// İşte sihir burada! Hemen çağrılan async fonksiyon.
(async () => {
try {
console.log('Sadece ilk renderda çalışacak API isteği başlıyor...');
const data = await fetchInitialData(signal); // Abort sinyalini gönder
// State'i güncelle vs.
console.log('Veri alındı:', data);
} catch (error) {
if (error.name !== 'AbortError') {
// İptal hatası değilse, gerçek bir hatayı işle
console.error('Veri çekme hatası:', error);
}
}
})();
// Temizlik fonksiyonu: Component kaldırılırsa isteği iptal et
return () => {
console.log('Component kaldırılıyor, istek iptal ediliyor.');
controller.abort();
};
}, []); // Boş dizi = Sadece ilk render
return <div>İlk veriler yükleniyor...</div>;
}
export default MyComponent;Bu yapıyı kullanırken birkaç önemli noktaya dikkat etmek gerekiyor. Birincisi, ESLint (özellikle eslint-plugin-react-hooks) boş bağımlılık dizisi konusunda çok katıdır. Eğer useEffect içinde kullandığınız bir değişken veya fonksiyon component scope'undan geliyorsa, onu bağımlılık dizisine eklemelisiniz. Aksi takdirde uyarı alırsınız ve bu uyarı genellikle haklıdır!
İkincisi, yukarıdaki örnekte olduğu gibi, AbortController kullanmak, component aniden kaldırıldığında (kullanıcı sayfadan ayrıldığında) sürmekte olan API isteklerini iptal etmek için çok önemli bir optimizasyondur. Bu, memory leak ve gereksiz network isteklerini önler.
Peki ya component içinde tanımlı bir fonksiyonu sadece bir kere çalıştırmak isterseniz? O zaman useCallback hook'u ile fonksiyonu memoize edip, bağımlılık dizisine onu ekleyebilirsiniz. Ancak bu, başka bir makalenin konusu.
Siz bu yöntemi kullanıyor musunuz? Ya da React'te bileşen ilk mount olduğunda çalıştırdığınız kodlar için farklı, daha şık bir pattern'iniz var mı? Yorumlarda paylaşabilirsiniz, birlikte öğrenelim!