useState vs useRef vs variables globales

 Si un componente de React tiene un useState que no se usa para el renderizado ¿Hay que trasladar el useState a una variable global?

Muy buena observación, Gabriel 👌. La respuesta corta es: no necesariamente. Depende de qué propósito tenga ese useState.

🔹 Cómo funciona useState

• Cada vez que llamás a setState, React vuelve a renderizar el componente si ese estado se usa en el JSX.

• Si el estado no afecta el renderizado, igual se guarda en la memoria interna del componente, pero no genera cambios visibles.

🔹 Casos donde NO hace falta trasladarlo a global

• Si el estado es temporal o local (ej. un contador interno, un flag de validación, un índice de iteración).

• Si solo lo usa ese componente y no importa fuera de él. 👉 En ese caso, podés dejarlo como useState aunque no se refleje en el JSX.

🔹 Casos donde SÍ conviene moverlo

• Si el estado debe sobrevivir entre cambios de página o desmontajes del componente.

• Si varios componentes distintos necesitan acceder al mismo valor.

• Si querés evitar renders innecesarios porque el estado nunca se usa en el JSX.

En esos casos, tenés alternativas:

• Context API: para compartir estado entre componentes sin prop drilling.

• Librerías de estado global (Zustand, Redux, Jotai, Recoil).

• Variables externas (ej. un módulo JS con un objeto mutable, aunque menos idiomático).

• Refs (useRef): si querés guardar un valor mutable que no dispara re-render.

🔹 Ejemplo práctico

Si tu estado es solo un buffer interno y no afecta el renderizado:

jsx

function Componente() {
  const [buffer, setBuffer] = React.useState("");

  // buffer nunca se usa en el JSX
  // mejor usar useRef:
  const bufferRef = React.useRef("");

  function actualizar(valor) {
    bufferRef.current = valor;
  }

  return <div>Componente</div>;
}

👉 useRef es más eficiente porque no dispara renders y mantiene el valor entre renders.

✨ Conclusión

• Si el estado no afecta el renderizado, no hace falta moverlo a global.

• Podés dejarlo en el componente o usar useRef si solo querés persistencia interna sin re-render.

• Solo trasladalo a global si varios componentes lo necesitan o si debe sobrevivir a desmontajes.

¿Querés que te arme un ejemplo comparando useState vs useRef vs Context para ver cuándo conviene cada uno en la práctica?