usePrevious
- React kursu
- Orta seviye
- Ders 3/80
- 4 dk
Bir değerin bir önceki halini saklayan usePrevious hook'unu yazarsın.
usePrevious
usePrevious, bir önceki render'daki değeri hatırlamak için kullanılır. React state'inde yalnızca güncel değer bulunur; bir önceki değer doğrudan erişilemez.
Çözüm: useRef ile bir hatıra tut, useEffect ile her render'dan sonra güncelle. const ref = useRef(value); useEffect(() => { ref.current = value; }); return ref.current;
İpucu: useEffect'in bağımlılık dizisi [value] olmalıdır. Böylece yalnızca value değiştiğinde ref güncellenir. Bu hook, animasyonlarda eski/yeni değer karşılaştırması için de kullanışlıdır.
useEffect sırası
useEffect, render çizildikten sonra çalışır. Yani ref.current = value ataması, bileşen ekrana çizildikten sonra yapılır. Bu yüzden dönen ref.current hâlâ eski değerdir; yeni değer bir sonraki render'da görünür.
İşte bu yüzden hook'un adı "usePrevious"tir. Render sırasında önceki değeri okur, render'dan sonra da bir sonraki render için hazırlık yapar.
Bu sıralama ilk başta kafa karıştırıcı olabilir ama React'in çizim mantığının merkezidir. Yan etkiler (effect'ler) her zaman çizimden sonra çalışır.
Uygulama usePrevious yaz
Aşağıdaki iskeleti tamamla. usePrevious(value) hook'u yaz. useRef(value) ile ref oluştur. useEffect içinde ref.current = value ata; bağımlılık dizisi [value] olsun. ref.current'i döndür. Hook'u dışa aktar.
Başlangıç kodu
import { useRef, useEffect } from "react";
// usePrevious hook'unu buraya yazÖrnek çözüm
import { useRef, useEffect } from "react";
function usePrevious(value) {
const ref = useRef(value);
useEffect(() => {
ref.current = value;
}, [value]);
return ref.current;
}
export default usePrevious;Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 usePrevious hangi hook'ları kullanır?
- useMemo ve useCallback
- useState ve useContext
- useReducer ve useRef
- useRef ve useEffect Doğru cevap
Açıklama: usePrevious useRef ve useEffect kullanır.
2 Erişim
Bir önceki değere ____ özniteliği ile erişilir.Bir önceki değere ref.current özniteliği ile erişilir.Açıklama: ref.current ile erişilir.
3 usePrevious adımlarını eşleştir
| Kavram | Anlamı |
|---|---|
useRef(value) |
İlk değer |
useEffect |
Yan etki |
ref.current = value |
Güncelleme |
return ref.current |
Eski değer |