¿Para qué sirven forwardRef y useImperativeHandle?

Question

Accepted Answer

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. ## Reenviar una ref a un nodo del DOM ```jsx const TextInput = forwardRef(function TextInput(props, ref) { return ; // parent's ref now points to the }); // parent can focus the inner input: const ref = useRef(null); ; // ref.current.focus(); ``` ## Exponer una API personalizada en lugar del nodo crudo A veces no quieres exponer todo el nodo del DOM, sino solo métodos específicos: ```jsx const FancyInput = forwardRef(function FancyInput(props, ref) { const inner = useRef(null); useImperativeHandle(ref, () => ({ focus: () => inner.current.focus(), clear: () => { inner.current.value = ""; }, }), []); return ; }); // parent: fancyRef.current.focus(); fancyRef.current.clear(); ``` ## Cuándo usarlo (con moderación) 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.