CodeBlanks Logo Icon CodeBlanks

Özet - İleri useRef

Bir input'u forwardRef ile sarıp parent'tan odaklatırsın.

Özet - İleri useRef

Bu grupta useRef ile hesaplama önbelleği, DOM ölçümü ve forwardRef ile ref geçişini öğrendin. useRef çizim tetiklemeden değer tutar; useEffect içinde ölçüm yapılır; forwardRef ref'i alt bileşene iletir.

Bu üç teknik birlikte karmaşık etkileşimler kurar: önbellekli hesap, ölçüm tabanlı yerleşim ve erişilebilir alt bileşenler. Son adımda üçünü birleştireceksin.

Uygulama Özet forwardRef

Aşağıdaki iskeleti tamamla. FancyInput bileşenini forwardRef ile yaz; (props, ref) alsın ve <input ref={ref} {...props} /> döndürsün. Dışa aktar.

Başlangıç kodu

App.jsx
import { forwardRef } from "react";

// FancyInput bileşenini buraya yaz

Örnek çözüm

App.jsx
import { forwardRef } from "react";

const FancyInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

export default FancyInput;

Soru ve cevaplar

Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.

1 DOM ölçümü hangi hook ile yapılır?

  • useState
  • useCallback
  • useEffect Doğru cevap
  • useMemo

Açıklama: Ölçüm useEffect içinde yapılır.

2 Özet eşleştir

Kavram Anlamı
useRef Değer tutar
useEffect Ölçüm yapar
forwardRef Ref iletir
current Ref özelliği

Orta seviye bölümündeki tüm dersler