Özet - Hooks
- React Native kursu
- Orta seviye
- Ders 6/116
- 5 dk
useEffect, useRef ve useMemo'yu birleştirerek bir zamanlayıcı yazarsın.
Özet - Hooks
Bu grupta dört temel hook'u öğrendin. useEffect yan etkileri mount ve update anlarında çalıştırır; dependency array ile yeniden çalışma koşulunu belirlersin. cleanup ile kaynağı serbest bırakır, useRef ile render'sız mutable referans tutarsın.
useMemo ise pahalı hesabı önbelleğe alır. Şimdi bunları birleştirip bir zamanlayıcı bileşeni yazacaksın: useEffect zamanlayıcıyı kurar, useRef kimliği tutar, cleanup ile durdurulur. Bu, gerçek uygulamalarda sık göreceğin bir desendir.
Uygulama useEffect ile sayaç kur
Bir Stopwatch bileşeni yaz. useState ile seconds state'i tut. useEffect içinde setInterval ile her saniye seconds'u bir artır; dependency array [] olsun (yalnızca mount). Cleanup ile clearInterval çağır. Bileşen <Text>{`Süre: ${seconds}`}</Text> döndürsün.
Başlangıç kodu
// useEffect ve useState'i içe aktar
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
// useEffect içinde setInterval başlat; cleanup döndür; dizi boş olsun
return <Text>Süre: {seconds}</Text>;
}Örnek çözüm
import { useEffect, useState } from "react";
import { Text } from "react-native";
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
useEffect(() => {
const id = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(id);
}, []);
return <Text>Süre: {seconds}</Text>;
}Uygulama useRef ile zamanlayıcı kimliği
Aynı Stopwatch bileşenine useRef ekle. idRef oluştur (ilk değer null). setInterval sonucunu idRef.current'e ata. Cleanup'ta clearInterval(idRef.current) çağır. Bileşen <Text>Süre</Text> döndürsün.
Başlangıç kodu
// useEffect, useRef ve useState'i içe aktar
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
// idRef oluştur (ilk değer null)
// useEffect içinde setInterval'i idRef.current'e ata; cleanup döndür
return <Text>Süre</Text>;
}Örnek çözüm
import { useEffect, useRef, useState } from "react";
import { Text } from "react-native";
function Stopwatch() {
const [seconds, setSeconds] = useState(0);
const idRef = useRef(null);
useEffect(() => {
idRef.current = setInterval(() => setSeconds(s => s + 1), 1000);
return () => clearInterval(idRef.current);
}, []);
return <Text>Süre</Text>;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Bu bileşende cleanup ne işe yarar?
useEffect(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
}, []);- Zamanlayıcıyı durdurur Doğru cevap
- Yeni efekt ekler
- Hiçbir şey
- State oluşturur
Açıklama: Cleanup, setInterval'i clearInterval ile durdurur.
2 Hook'u rolüne eşle
| Kavram | Anlamı |
|---|---|
useEffect |
Yan etki |
useRef |
Mutable referans |
useMemo |
Hesap önbelleği |
cleanup |
Kaynağı bırakır |
3 Hook'u içe aktar
import { ____ } from "react";import { useMemo } from "react";Açıklama: useMemo hook'u içe aktarıldı.