usePrevious
- React Native kursu
- Orta seviye
- Ders 10/116
- 5 dk
usePrevious özel hook'unu öğrenirsin.
usePrevious nedir?
usePrevious bir değerin bir önceki render'daki halini tutan özel hook'tür. Bir useRef ve bir useEffect ile yazılır. Çağıran bileşene her render'da bir önceki değeri döndürür.
Yaygın kullanım: bir sayının azalıp artmadığını göstermek, eski ve yeni değeri kıyaslamak. const prev = usePrevious(count) yazarsın; ilk render'da prev undefined olur, ikinci render'da ise bir önceki count değerini alırsın. Bu hook, gösterge ekranlarında çok işe yarar.
usePrevious mantığı
usePrevious iki parçadan kuruludur. Bir useRef önceki değeri tutar; useEffect ise render sonrası bu ref'i günceller. Efekt içinde ref.current = value ataması yapılır; ama efekt render'dan sonra çalıştığı için bu atama bir sonraki render'da görünür.
Böylece hook önce ref.current'i (eski değer) döndürür, sonra efekt çalışıp ref'i yeni değere günceller. Bu sıra sayesinde her zaman bir önceki render'daki değer elde edilir. ref.current değişimi render tetiklemediği için sonsuz döngü oluşmaz.
Uygulama usePrevious'ı yaz
usePrevious özel hook'unu yaz. useRef ile ref oluştur (ilk değer undefined). useEffect içinde ref.current = value ata; dependency array [value] olsun. Hook ref.current döndürsün.
Başlangıç kodu
// useRef ve useEffect'i içe aktar
// usePrevious özel hook'unu yaz
// ref'i useRef ile oluştur
// useEffect içinde ref.current'e yeni değeri ata; dizi [value]
// ref.current döndürÖrnek çözüm
import { useEffect, useRef } from "react";
function usePrevious(value) {
const ref = useRef(undefined);
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 usePrevious ilk render'da ne döndürür?
const prev = usePrevious(count);- Mevcut değer
- undefined Doğru cevap
- Hata fırlatır
- Sıfır
Açıklama: İlk render'da önceki değer yoktur.
2 useEffect bağımlılığını yaz
useEffect(() => {
ref.current = value;
}, ____);useEffect(() => {
ref.current = value;
}, [value]);Açıklama: value değiştiğinde efekt yeniden çalışır.
3 Kavramı rolüne eşle
| Kavram | Anlamı |
|---|---|
useRef |
Eski değeri tutar |
useEffect |
Ref'i günceller |
ref.current |
Döndürülen değer |
undefined |
İlk render değeri |