usePrevious

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.

Örnek çözümü göster

import { useRef, useEffect } from "react";

function usePrevious(value) {
  const ref = useRef(value);
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

export default usePrevious;

Kendini test et

usePrevious hangi hook'ları kullanır?
- useMemo ve useCallback
- useState ve useContext
- useReducer ve useRef
- useRef ve useEffect
Cevabı göster

useRef ve useEffect — usePrevious useRef ve useEffect kullanır.

Erişim

Bir önceki değere ____ özniteliği ile erişilir.

Cevabı göster

Bir önceki değere ref.current özniteliği ile erişilir.

usePrevious adımlarını eşleştir

useRef(value)

İlk değer
useEffect

Yan etki
ref.current = value

Güncelleme
return ref.current

Eski değer

Sıradaki ders: Özet - Custom hook temelleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler