CodePark/ questions / Refs
START PRACTICINGPRACTICE
Frontend question · React › Refs

How do you let a parent get a ref to a DOM node inside your function component in React 19? What changed from earlier versions?

function MyInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

function Form() {
  const inputRef = useRef(null);
  return <MyInput ref={inputRef} onFocus={() => {}} />;
}

In React 19, function components receive ref as a regular prop. Destructure it and pass it to the DOM element you want to expose. A parent's useRef will then point at that node.

Before React 19, ref was not passed as a prop. You had to wrap the component in forwardRef((props, ref) => ...). forwardRef still works. It is no longer needed for new code and is expected to be deprecated.

Sometimes you want to expose a limited API instead of the raw node, for example only focus and scrollIntoView. Then use useImperativeHandle(ref, () => ({ focus() {...} })).

React 19 also lets callback refs return a cleanup function. React runs it when the element is removed.

  • In React 19, ref is a normal prop for function components.
  • Earlier versions required forwardRef.
  • forwardRef still works but is not needed for new code.
  • useImperativeHandle exposes a custom, limited handle instead of the node.
  • In React 19, callback refs can return a cleanup function.