useEffect
- React Native kursu
- Orta seviye
- Ders 1/116
- 5 dk
useEffect ile yan etkileri öğrenirsin.
useEffect nedir?
React Native'te useEffect yan etkileri (side effects) yöneten bir hook'tür. Yan etki; veri çekme, abonelik, zamanlayıcı veya elle ağ çağrısı gibi render dışı işlemlerdir. useEffect(EffectCallback) şeklinde çağrılır; EffectCallback bir fonksiyondur.
useEffect, bileşen ekrana geldiğinde (mount) çağrılır. Render edildikten sonra çalışır; böylece state güncellendikçe tetiklenir. Hook'u react paketinden içe aktar: import { useEffect } from "react";. useEffect asenkron yan etkileri güvenli bir biçimde yazmanı sağlar.
Effect callback
useEffect'in ilk parametresi effect callback'dir; bir fonksiyondur. Bileşen render edildikten sonra React bu fonksiyonu çağırır. İçinde console.log, fetch veya setInterval gibi yan etki çağrıları yapılır.
Effect callback her render sonrası varsayılan olarak çalışır. Bu davranışı değiştirmek için ikinci parametre olan dependency array kullanılır; bir sonraki derste göreceğiz. Effect callback'in içinden döndürülen fonksiyon cleanup olarak adlandırılır ve bileşen kaldırılmadan önce çağrılır.
Uygulama useEffect ile mesaj yaz
Bir Message bileşeni yaz. useEffect'i içe aktar; effect callback içinde console.log ile "Bileşen ekrana geldi" yaz. Bileşen <Text>Merhaba</Text> döndürsün.
Başlangıç kodu
// useEffect'i içe aktar
// buraya yaz
function Message() {
// useEffect ile mesaj yaz
// buraya yaz
return <Text>Merhaba</Text>;
}Örnek çözüm
import { useEffect } from "react";
import { Text } from "react-native";
function Message() {
useEffect(() => {
console.log("Bileşen ekrana geldi");
});
return <Text>Merhaba</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 useEffect hangi amaçla kullanılır?
useEffect(() => { /* ... */ });- Yan etkileri yönetmek için Doğru cevap
- State oluşturmak için
- Bileşenleri stillendirmek için
- Navigasyon için
Açıklama: useEffect ile yan etkileri yönetirsin.
2 Hook'u içe aktar
import { ____ } from "react";import { useEffect } from "react";Açıklama: Hook'un adı useEffect'tir.
3 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
useEffect |
Yan etki hook'u |
EffectCallback |
Çalışacak fonksiyon |
mount |
Bileşen ekrana geldi |
render |
Ekran çizildi |