React forwardRef y useRef, son funciones nativas de React que nos permiten manejar referencias a nodos del DOM y otros valores de una manera más eficiente. Vamos a ver qué son, cómo funcionan y por qué son útiles. ## ¿Qué es React.forwardRef? Es una función que permite pasar referencias (refs) a componentes funcionales en React. Esto es útil cuando necesitamos que un componente padre acceda directamente al DOM de un componente hijo. ### Ejemplo sin forwardRef: Veamos un ejemplo rápido sin forwardRef. Supongamos que tenemos un componente de botón y queremos que el componente padre pueda enfocar ese botón. ``` const Button = ({ children }) => { return ; }; const App = () => { const buttonRef = useRef(null); return ; }; ``` En este código, el componente Button no recibe la referencia ref correctamente, ya que las referencias no se pasan automáticamente a los componentes funcionales. ### Ejemplo con forwardRef: Ahora, veamos cómo forwardRef soluciona esto. ``` const Button = React.forwardRef((props, ref) => { return ; }); const App = () => { const buttonRef = useRef(null); return ; }; ``` En este ejemplo, forwardRef permite que el componente padre pase una ref al hijo, lo que facilita el acceso directo al DOM y permite manipulaciones como enfocar el botón. ### Beneficios de React forwardRef Como pueden ver, forwardRef permite que el componente padre pase una ref al hijo, lo que facilita el acceso directo al DOM y permite manipulaciones como enfocar el botón. Este patrón es especialmente útil en componentes reutilizables y librerías de componentes, donde la encapsulación del DOM dentro de componentes funcionales es común. ## ¿Qué es useRef? useRef es un hook que nos permite crear una referencia mutable que persiste a través de las renderizaciones de un componente. Esto es útil para acceder a elementos del DOM o para almacenar valores que no requieren una re-renderización cuando cambian. ### Ejemplo Básico de useRef Veamos un ejemplo básico usando useRef para enfocar un input cuando la página se carga. ``` const App = () => { const inputRef = useRef(null); useEffect(() => { if (inputRef.current) { inputRef.current.focus(); } }, []); return ; }; ``` En este ejemplo, useRef nos permite mantener una referencia al input y usar esa referencia para enfocarlo cuando el componente se monta. Esto es útil porque useRef no causa una re-renderización cuando cambia su valor. ### Beneficios de useRef El uso de useRef ofrece varios beneficios clave: - Persistencia de Valores: Las referencias creadas con useRef persisten entre renderizaciones, lo que permite mantener un estado sin causar re-renderizaciones innecesarias. - Acceso Directo al DOM: useRef proporciona una manera fácil y eficiente de acceder y manipular elementos del DOM directamente. - Compatibilidad con forwardRef: useRef puede usarse en conjunto con forwardRef para crear componentes altamente reutilizables y manejables. ## Ejemplo Práctico Combinando React forwardRef y useRef Ahora, veamos un ejemplo práctico donde combinamos forwardRef y useRef para crear un componente reutilizable y manejable. ``` const Button = React.forwardRef((props, ref) => { return ; }); const App = () => { const buttonRef = useRef(null); const handleClick = () => { if (buttonRef.current) { buttonRef.current.focus(); } }; return (

); }; ``` En este ejemplo, forwardRef permite que la ref pase desde el componente App al componente Button. Luego, usamos useRef en App para crear y manejar esa ref, permitiendo que el botón se enfoque cuando hacemos clic en el segundo botón. React.forwardRef y useRef son herramientas poderosas que nos permiten manejar referencias en React de manera eficiente. forwardRef nos permite pasar refs a componentes funcionales, y useRef nos permite mantener referencias que persisten entre renderizaciones. Juntas, estas herramientas facilitan el manejo del DOM y la creación de componentes reutilizables. ## Recursos adicionales [Documentación React forwardRef](https://react.dev/reference/react/forwardRef) [Documentación useRef()](https://react.dev/reference/react/useRef )

anjrot

React forwardRef & useRef | Guía para aprender a utilizarlos

Join Our Newsletter. No Spam, Only the good stuff.