Conservar valores sin volver a renderizar

Objetivo: Almacenar valores que sobreviven a los renderizados sin provocar uno nuevo. useRef proporciona un contenedor .current estable.

• Persiste entre renderizados
• No provoca un nuevo renderizado al cambiar
• Es ideal para temporizadores y valores anteriores

Las actualizaciones de useState vuelven a renderizar la interfaz. Las actualizaciones de useRef no lo hacen. Elija ref para helpers mutables (identificadores y contadores para la lógica), no para datos de la interfaz.

Incrementamos un renderCount en un efecto y lo guardamos en un ref; sobrevive a los renderizados, pero no los provoca.

Usos adecuados:

• Identificadores de temporizadores e intervalos
• Cachés de valores anteriores
• Indicadores entre renderizados (por ejemplo, isMounted)

No para: datos que deban aparecer en la interfaz.

Guardamos el identificador del intervalo en un ref para poder iniciar y detener el temporizador sin provocar renderizados adicionales.

Errores comunes:

• No lea un ref para controlar la interfaz sin usar estado: la interfaz no se actualizará.
• Restablezca los refs al desmontar si contienen identificadores o recursos.
• Evite abusar de los refs como contenedores globales.

Resumen: Use useRef para valores mutables que persisten entre renderizados, como identificadores, valores anteriores o indicadores, sin provocar nuevos renderizados. Use el estado para la interfaz visible.