React: What is React 19 ref as prop?

1import { forwardRef, useRef } from "react";
2
3const MyInput = forwardRef<HTMLInputElement, { placeholder?: string }>(
4  ({ placeholder }, ref) => {
5    return <input ref={ref} placeholder={placeholder} />;
6  }
7);
8
9function App() {
10  const inputRef = useRef<HTMLInputElement>(null);
11  return <MyInput ref={inputRef} placeholder="Type..." />;
12}

1import { useRef, type Ref } from "react";
2
3interface MyInputProps {
4  placeholder?: string;
5  ref?: Ref<HTMLInputElement>;
6}
7
8function MyInput({ placeholder, ref }: MyInputProps) {
9  return <input ref={ref} placeholder={placeholder} />;
10}
11
12function App() {
13  const inputRef = useRef<HTMLInputElement>(null);
14  return <MyInput ref={inputRef} placeholder="Type..." />;
15}

1function TrackedElement({ ref }: { ref?: Ref<HTMLDivElement> }) {
2  return (
3    <div
4      ref={(node) => {
5        if (node) {
6          // Setup: start observing
7          const observer = new ResizeObserver(handleResize);
8          observer.observe(node);
9
10          // Cleanup (React 19): stop observing
11          return () => observer.disconnect();
12        }
13      }}
14    >
15      Content
16    </div>
17  );
18}

1function DualInput({
2  label,
3  firstRef,
4  secondRef,
5}: {
6  label: string;
7  firstRef?: Ref<HTMLInputElement>;
8  secondRef?: Ref<HTMLInputElement>;
9}) {
10  return (
11    <div>
12      <label>{label} (First)</label>
13      <input ref={firstRef} />
14      <label>{label} (Second)</label>
15      <input ref={secondRef} />
16    </div>
17  );
18}