React 19'da ref'ler nasıl değişti? forwardRef ve useImperativeHandle ne zaman gerekir?

React 19'da function component'ler `ref`'i normal bir prop olarak alabilir; forwardRef artık gerekli değildir (ileride deprecate edilecek). Ayrıca ref callback'leri bir cleanup fonksiyonu döndürebilir.

// React 19
function TextInput({ ref, ...props }: React.ComponentProps<"input">) {
  return <input ref={ref} {...props} />;
}

// React 18 ve öncesi
const TextInputOld = React.forwardRef<HTMLInputElement, Props>((props, ref) => (
  <input ref={ref} {...props} />
));

Ref callback cleanup (React 19)

<div
  ref={(node) => {
    const observer = new ResizeObserver(() => {});
    observer.observe(node);
    return () => observer.disconnect();
  }}
/>

useImperativeHandle

Parent'a DOM düğümünün tamamı yerine sınırlı bir API açmak için kullanılır:

type VideoHandle = { play: () => void; pause: () => void };

function VideoPlayer({ ref, src }: { ref?: React.Ref<VideoHandle>; src: string }) {
  const videoRef = useRef<HTMLVideoElement>(null);
  useImperativeHandle(ref, () => ({
    play: () => videoRef.current?.play(),
    pause: () => videoRef.current?.pause(),
  }), []);
  return <video ref={videoRef} src={src} />;
}

// Parent
const player = useRef<VideoHandle>(null);
<button onClick={() => player.current?.play()}>Oynat</button>

Ne zaman ref, ne zaman prop?

Ref'ler imperatif işlemler içindir: odaklama, scroll, medya oynatma, ölçüm, üçüncü parti kütüphane entegrasyonu. "Modal açık mı" gibi şeyler ise prop/state ile deklaratif ifade edilmelidir; ref.current.open() gibi API'lerden kaçının.