useEffect lifecycle
- React Native kursu
- Orta seviye
- Ders 62/116
- 5 dk
useEffect ile yaşam döngüsü öğrenirsin.
useEffect ile yaşam döngüsü
useEffect, sınıf bileşenlerin üç yaşam döngüsü metodunu (componentDidMount, componentDidUpdate, componentWillUnmount) tek bir kancada birleştirir. Bağımlılık dizisi hangi aşamada çalışacağını belirler.
Boş dizi [] yalnızca mount'ta; dolu dizi [a, b] mount'ta ve a ya da b değişince; dizi yoksa her çizimde çalışır. Cleanup döndürerek unmount davranışı eklenir.
Uygulama userId değişimini izle
Bir useEffect ekle. İçinde console.log('user: ' + userId) yaz ve bağımlılık dizisine userId koy.
Başlangıç kodu
import React from 'react';
import { Text } from 'react-native';
export default function Profile({ userId }) {
// userId değişince log yaz
return <Text>{userId}</Text>;
}Örnek çözüm
import React, { useEffect } from 'react';
import { Text } from 'react-native';
export default function Profile({ userId }) {
useEffect(() => {
console.log('user: ' + userId);
}, [userId]);
return <Text>{userId}</Text>;
}Üç davranış
useEffect üç temel davranış sunar. Yalnızca mount için boş dizi; değişen değer için dolu dizi; her çizim için dizi yok. Cleanup her durumda döndürülebilir.
Bu üç davranış, tek bir kancayla yan etkileri yaşam döngüsüne göre ayarlamanı sağlar. Doğru dizi seçimi, gereksiz çalışmayı ve sızıntıyı önler.
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hiç bağımlılık dizisi vermezsen ne olur?
- Yalnızca mount'ta çalışır
- Her çizimde çalışır Doğru cevap
- Yalnızca unmount'ta çalışır
- Hiç çalışmaz
Açıklama: Dizi yoksa efekt her çizimde çalışır.
2 count değişimini izle
useEffect(() => { save(count); }, [____]);useEffect(() => { save(count); }, [count]);Açıklama: [count] dizisi count değişimini izler.
3 Dizi davranışını eşleştir
| Kavram | Anlamı |
|---|---|
[] |
Yalnızca mount |
[count] |
Mount + count değişimi |
dizi yok |
Her çizim |
cleanup |
Unmount öncesi |