useRef Hook ### ### Introducción ### El Hook useRef permite crear una referencia mutable que persiste durante todo el ciclo de vida del componente. Es útil para acceder y manipular elementos del DOM directamente, mantener cualquier valor mutable que no cause una re-renderización cuando cambie, y almacenar valores previos entre renderizaciones. ### Sintaxis básica ### useRef se usa para crear una referencia y puede ser asignada a elementos del DOM. javascript import React, { useRef } from 'react'; function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { inputEl.current.focus(); }; return ( <div> <input ref={inputEl} type='text' /> <button onClick={onButtonClick}>Enfocar el input</button> </div> ); } ### Descripción del ejemplo ### En este ejemplo: - inputEl es una referencia creada con useRef. - Se asigna inputEl al elemento input, por lo que inputEl.current apunta al nodo del DOM. - La función onButtonClick enfoca el input al invocar inputEl.current.focus(). ### Otras aplicaciones de useRef ### useRef no solo es para manipular el DOM; también puede mantener cualquier valor mutable entre renderizaciones que no causa una re-renderización cuando cambia. javascript import React, { useState, useRef, useEffect } from 'react'; function Timer() { const [count, setCount] = useState(0); const countRef = useRef(count); countRef.current = count; useEffect(() => { const interval = setInterval(() => { console.log(`Count is: ${countRef.current}`); setCount((prevCount) => prevCount + 1); }, 1000); return () => clearInterval(interval); }, []); return <div>Count: {count}</div>; } ### Descripción del ejemplo avanzado ### En este ejemplo: - countRef se usa para almacenar el valor actual de count de manera que el intervalo setInterval siempre tenga el último valor sin necesidad de ser detenido y reiniciado. ### Uso común de useRef ### - Acceso directo a elementos del DOM: Enfocar inputs, detener animaciones, manipular canvas, etc. - Guardar valores de instancias previas: Mantener una referencia a valores previos sin causar re-renderización. - Mantener cualquier valor mutable: Ideal para almacenar datos que deben persistir a través de renderizaciones pero no causar re-render. ### Diferencia entre useRef y useState ### Mientras que useState provoca la re-renderización del componente cuando cambia su valor, useRef no. Esto hace a useRef más adecuado para valores que cambian frecuentemente y no necesitan causar re-renderizaciones, como identificadores de intervalo o cualquier otra referencia mutable. ### Advertencias ### Aunque useRef es poderoso, debe usarse con cautela: puede llevar a comportamientos difíciles de depurar si se combina con mutaciones no controladas del DOM o lógica de aplicación compleja. [Placeholder para imagen sobre el uso de useRef: Diagrama que muestra cómo useRef interactúa con el DOM, incluyendo la creación de referencias y su uso en manipulaciones directas del DOM.]