Entrevista · Refs
forwardRef
Pasar una ref hacia adentro de un componente
forwardRef permite que un componente exponga su nodo DOM interno al padre vía ref. Sin él, pasar ref a un componente personalizado no hace nada — ref no es una prop normal y React la intercepta.
Por qué ref no es una prop
React reserva ref (junto con key) y no la pasa al componente como prop regular. Si quieres que el padre acceda al DOM interno de un componente hijo, el hijo debe opt-in explícitamente con forwardRef.
useImperativeHandle
En lugar de exponer el nodo DOM directamente, puedes usar useImperativeHandle junto con forwardRef para exponer solo las operaciones que quieres permitir (focus, scroll, play…) — ocultando el DOM real y manteniendo la encapsulación del componente.
Tropiezos comunes
- 01En React 19, forwardRef ya no es necesario — ref puede pasarse como prop normal. Si usas React 18 o anterior, sigue siendo requerido.
- 02Exponer el DOM directamente rompe la encapsulación. Prefiere useImperativeHandle para limitar qué puede hacer el padre.
- 03forwardRef solo reenvía la ref al primer nivel — si tu componente interno también es personalizado, necesitas otro forwardRef.
¿Fue útil?
Inicia sesión para dar feedback