InteractionManager

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.

Örnek çözümü göster

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>;
}

Kendini test et

Kavramı rolüne eşle

InteractionManager

İşi erteler
runAfterInteractions

Etkileşim sonra çağrı
animasyon

Etkileşim örneği
useEffect

Yükleme yeri

runAfterInteractions çağrısı

InteractionManager.____(() => { setData(heavyData); });

Cevabı göster

InteractionManager.runAfterInteractions(() => { setData(heavyData); });

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
Cevabı göster

Ağır işi etkileşimden sonra yapar — InteractionManager ağır işi etkileşimden sonraya erteler.

Sıradaki ders: Özet - Performans

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler