Qué es useRef(). Uno de los React Hook más importantes y subestimados.

Hoy vamos a hablar de uno de los React Hook useRef() más importantes

Ganchos de reacción: useRef()
¿Qué es useRef()?
useRef() es un React Hook que le permite hacer referencia a un valor que no es necesario para la representación.

UseCase
Se utiliza para hacer referencia a un objeto dentro de un componente funcional y conserva el estado del objeto al que se hace referencia entre renderizaciones.
Se puede usar para almacenar un valor mutable que no provoca un -re-renderizado cuando se actualiza.

Si tratáramos de contar cuántas veces se renderiza nuestra aplicación usando el Hook useState(), estaríamos atrapados en un bucle infinito ya que este Hook en sí mismo provoca una nueva renderización.
para evitar esto usamos useRef() Hook:
//
Función de código App() {
const [inputValue, setInputValue] = useState(**);
cuenta constante = useRef(0);
useEffect(() => {
cuenta.actual= cuenta.actual + 1;
});
return (
<>
<input
type=”text”
value={inputValue}
onChange={(e)setInputValue(e.target.value)}
/>
<h1>Render Count: {count.current}</h1>
);
}

Producción

En cada pulsación de tecla en el campo de entrada, habrá
un incremento en el número.
Manipulación de DOM:
declarar un objeto ref, con un valor inicial de nulo:
//
Importación de código { useRef} from 'react';
function MyComponent() {
const inputRef = useRef(null);
…

Luego pase su objeto ref como el atributo ref al JSX del nodo DOM que desea manipular:
//Code
return <input ref={inputRef} />;

Después de que React crea el nodo DOM y lo coloca en la pantalla, React establecerá la propiedad actual de su objeto ref en ese nodo DOM. Ahora puede acceder al nodo DOM de <input> y llamar a métodos como focus:
//Code
function handleClick() {
inputRef.current.focus();
}
React establecerá la propiedad actual de nuevo en nulo cuando el nodo se elimine de la pantalla.