useEffect

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.

Örnek çözümü göster

import { useEffect } from "react";
import { Text } from "react-native";

function Message() {
  useEffect(() => {
    console.log("Bileşen ekrana geldi");
  });
  return <Text>Merhaba</Text>;
}

Kendini test et

useEffect hangi amaçla kullanılır?
```
useEffect(() => { /* ... */ });
```
- Yan etkileri yönetmek için
- State oluşturmak için
- Bileşenleri stillendirmek için
- Navigasyon için
Cevabı göster

Yan etkileri yönetmek için — useEffect ile yan etkileri yönetirsin.

Hook'u içe aktar

import { ____ } from "react";

Cevabı göster

import { useEffect } from "react";

Parçayı rolüne eşle

useEffect

Yan etki hook'u
EffectCallback

Çalışacak fonksiyon
mount

Bileşen ekrana geldi
render

Ekran çizildi

Sıradaki ders: Dependency array

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler