React 19 simplifies ref forwarding by accepting ref as a 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}
Benefits:
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}1314// Parent15function Form() {16 const inputRef = useRef(null);1718 return (19 <>20 <FancyInput ref={inputRef} />21 <button onClick={() => inputRef.current?.focus()}>Focus</button>22 <button onClick={() => inputRef.current?.clear()}>Clear</button>23 </>24 );25}
When to use: