React 19 simplifies ref forwarding with ref as prop.
Before:
1const TextInput = forwardRef((props, ref) => (2 <input ref={ref} {...props} />3));
After:
1function TextInput({ ref, ...props }) {2 return <input ref={ref} {...props} />;3}
With useImperativeHandle:
1function FancyInput({ ref, ...props }) {2 const inputRef = useRef(null);34 useImperativeHandle(ref, () => ({5 focus: () => inputRef.current?.focus(),6 clear: () => {7 if (inputRef.current) inputRef.current.value = "";8 },9 }));1011 return <input ref={inputRef} {...props} />;12}
Benefits: