Một ref truyền vào một component tùy biến không tự động vươn tới một nút DOM bên trong nó. forwardRef cho phép một component nhận một ref và gắn nó vào một phần tử con. useImperativeHandle tùy biến những gì ref đó lộ ra.
= ( () {
;
});
ref = ();
;
Đôi khi bạn không muốn lộ cả nút DOM — chỉ một số phương thức cụ thể:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// cha: fancyRef.current.focus(); fancyRef.current.clear();
Ưu tiên props/state để giao tiếp. Chỉ dùng ref cho các nhu cầu thực sự mệnh lệnh: quản lý focus, cuộn, chọn văn bản, phát media, hoặc tích hợp thư viện mệnh lệnh. Lưu ý: trong React 19, ref có thể truyền như một prop bình thường, nên forwardRef thường không còn cần thiết.