InteractionManager
- React Native kursu
- Orta seviye
- Ders 92/116
- 5 dk
InteractionManager ile akıcı etkileşim öğrenirsin.
InteractionManager nedir?
InteractionManager, ağır işleri kullanıcı etkileşiminden sonraya erteleyen API'dir. Animasyon veya kaydırma sürerken büyük hesap çalıştırırsan akıcılık bozulur; InteractionManager.runAfterInteractions(callback) bu işi etkileşim bitene kadar bekletir.
Tipik kullanım: bir ekran açıldığında ağır veriyi hemen değil, biraz sonra yüklemek. useEffect içine InteractionManager.runAfterInteractions(() => setData(heavy)) yazarsın. Bu, açılışta hızı korur. Etkileşim bitince callback çalışır ve veri gelir. React Native'in yerleşik API'sidir; ek paket gerektirmez.
runAfterInteractions
runAfterInteractions bir callback alır ve tüm etkileşimler bitene kadar bekletir. Geri dönüş değeri bir promise benzeri nesnedir; .then() ile de zincirleyebilirsin. cancel() metodu ile bekleyen işi iptal edebilirsin.
Örnek: const handle = InteractionManager.runAfterInteractions(() => { setReady(true); });. Bileşen unmount edilirse handle.cancel() çağırmak bekleyen callback'in çalışmasını engeller; bu, memory leak önler. useEffect içinde bu cleanup'ı return etmek sağlıklı bir akış kurar. Birden fazla ağır işi arka arkaya vermek yerine batchlemek de yararlıdır.
Uygulama InteractionManager ile ertele
Bir HeavyScreen bileşeni yaz. useState(false) ile ready state'i tut. useEffect içinde InteractionManager.runAfterInteractions çağır; callback setReady(true) yapsın. handle.cancel()'ı cleanup olarak döndür. Bileşen <Text>{ready ? 'Hazır' : 'Bekleyin'}</Text> döndürsün.
Başlangıç kodu
// InteractionManager'ı içe aktar
// useEffect ve useState'i içe aktar
function HeavyScreen() {
const [ready, setReady] = useState(false);
// useEffect içinde InteractionManager.runAfterInteractions çağır
// cleanup olarak handle'ı iptal eden işlev döndür
return <Text>{ready ? 'Hazır' : 'Bekleyin'}</Text>;
}Örnek çözüm
import { useEffect, useState } from "react";
import { Text, InteractionManager } from "react-native";
function HeavyScreen() {
const [ready, setReady] = useState(false);
useEffect(() => {
const handle = InteractionManager.runAfterInteractions(() => {
setReady(true);
});
return () => handle.cancel();
}, []);
return <Text>{ready ? "Hazır" : "Bekleyin"}</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
InteractionManager |
İşi erteler |
runAfterInteractions |
Etkileşim sonra çağrı |
animasyon |
Etkileşim örneği |
useEffect |
Yükleme yeri |
2 runAfterInteractions çağrısı
InteractionManager.____(() => { setData(heavyData); });InteractionManager.runAfterInteractions(() => { setData(heavyData); });Açıklama: runAfterInteractions callback'i etkileşim sonra çağırır.
3 InteractionManager ne işe yarar?
InteractionManager.runAfterInteractions(() => {});- Push bildirim gönderir
- Listeyi stillendirir
- API isteği atar
- Ağır işi etkileşimden sonra yapar Doğru cevap
Açıklama: InteractionManager ağır işi etkileşimden sonraya erteler.