Una ref pasada a un componente personalizado no llega automáticamente a un nodo del DOM dentro de él. forwardRef permite que un componente reciba una ref y la adjunte a un elemento hijo. useImperativeHandle personaliza qué expone esa ref.
Una ref pasada a un componente personalizado no llega automáticamente a un nodo del DOM dentro de él. forwardRef permite que un componente reciba una ref y la adjunte a un elemento hijo. useImperativeHandle personaliza qué expone esa ref.
const TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
A veces no quieres exponer todo el nodo del DOM, sino solo métodos específicos:
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} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
Prefiere las props/el estado para la comunicación. Recurre a las refs solo para necesidades genuinamente imperativas: gestión del foco, desplazamiento, selección de texto, reproducción de medios, o integración de librerías imperativas. Nota: en React 19, ref se puede pasar como una prop normal, por lo que forwardRef a menudo ya no es necesario.
Una biblioteca de preguntas de entrevista de IT con respuestas detalladas — de Junior a Senior.
Donar