How did ref handling change in React 19 (ref as a prop, forwardRef, ref cleanup)?

import { useRef, useState, useCallback, useImperativeHandle } from "react";

// ── React 19: ref is just a prop. No forwardRef wrapper. ──────────────────
function TextField({ ref, label, ...rest }) {
  return (
    <label style={{ display: "block", marginBottom: 8 }}>
      {label}: <input ref={ref} {...rest} />
    </label>
  );
}

// ── Still works: useImperativeHandle to expose a custom API rather than
//    the raw node. The ref still arrives as an ordinary prop. ──────────────
function Counter({ ref }) {
  const [n, setN] = useState(0);
  useImperativeHandle(ref, () => ({
    increment: () => setN((v) => v + 1),
    reset: () => setN(0),
  }), []);
  return <p style={{ margin: "8px 0" }}>Counter value: <strong>{n}</strong></p>;
}

// ── React 19: a ref CALLBACK may return a cleanup. Setup and teardown sit
//    together, exactly like an effect — no if (node === null) branch.
//
//    IMPORTANT: the callback must be STABLE. An inline arrow is a new function
//    every render, so React detaches and reattaches on each one — and if the
//    callback also sets state, that is an infinite loop. Hence useCallback.
function Measured({ onLog }) {
  const measureRef = useCallback((node) => {
    // ResizeObserver is a browser API; guard it so this also runs in a
    // non-browser environment such as a test renderer.
    const ro =
      typeof ResizeObserver !== "undefined"
        ? new ResizeObserver(() =>
            onLog("observed width " + Math.round(node.getBoundingClientRect().width)))
        : null;
    ro?.observe(node);
    onLog("attached observer");
    // Pre-19 this teardown had to live in a null branch of this same
    // callback, and was very easy to forget.
    return () => {
      ro?.disconnect();
      onLog("observer disconnected");
    };
  }, [onLog]);

  return (
    <div
      ref={measureRef}
      style={{ border: "2px dashed #4f46e5", padding: 12, borderRadius: 8, resize: "horizontal", overflow: "auto", minWidth: 160 }}
    >
      Drag my bottom-right corner to resize me.
    </div>
  );
}

export default function App() {
  const inputRef = useRef(null);
  const counterRef = useRef(null);
  const [mounted, setMounted] = useState(true);
  const [log, setLog] = useState([]);
  // Stable identity, so the ref callback below is also stable.
  const push = useCallback((line) => setLog((l) => [...l.slice(-5), line]), []);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6 }}>
      <TextField ref={inputRef} label="Name" placeholder="click focus below" />
      <button onClick={() => inputRef.current?.focus()}>focus the input</button>

      <hr />
      <Counter ref={counterRef} />
      <button onClick={() => counterRef.current?.increment()}>increment via ref</button>{" "}
      <button onClick={() => counterRef.current?.reset()}>reset via ref</button>

      <hr />
      {mounted && <Measured onLog={push} />}
      <p>
        <button onClick={() => setMounted((m) => !m)}>
          {mounted ? "unmount" : "mount"} the observed box
        </button>
      </p>
      <pre style={{ background: "#f6f6f6", padding: 10, borderRadius: 6, fontSize: 12 }}>
        {log.length ? log.join("\n") : "(resize or unmount the box)"}
      </pre>

      <p style={{ color: "#666", fontSize: 13 }}>
        Unmount the box and watch the log: the cleanup returned from the ref
        callback disconnects the observer. No forwardRef appears anywhere on
        this page.
      </p>
    </div>
  );
}