Logo de JSCamp

Fast Refresh y Actualizaciones de Estado

En esta clase vamos a entender dos conceptos importantes: Fast Refresh (una característica que hace que tu desarrollo sea más rápido) y la forma correcta de actualizar el estado cuando depende de su valor anterior.

¿Qué es Fast Refresh?

Fast Refresh es una tecnología específica de React que preserva el estado de tus componentes cuando guardas cambios en el código.

Ejemplo práctico

Imagina que estás desarrollando un contador:

function Contador() {
  const [count, setCount] = React.useState(0)

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>Incrementar</button>
    </div>
  )
}

Sin Fast Refresh:

  1. Has clickeado varias veces, el contador está en 15
  2. Cambias el texto “Incrementar” por “Sumar”
  3. Guardas el archivo
  4. La página se recarga completamente
  5. ❌ El contador vuelve a 0

Con Fast Refresh:

  1. Has clickeado varias veces, el contador está en 15
  2. Cambias el texto “Incrementar” por “Sumar”
  3. Guardas el archivo
  4. El componente se actualiza
  5. ✅ El contador sigue en 15

¡El estado se mantiene! Esto es súper útil cuando estás desarrollando.

Fast Refresh vs Hot Module Replacement (HMR)

Aunque parecen lo mismo, hay una diferencia importante:

Hot Module Replacement (HMR)

  • 🔧 Tecnología genérica para cualquier tipo de código
  • 📦 Funciona con JavaScript, CSS, imágenes, etc.
  • 🔄 Reemplaza módulos sin recargar la página
  • ⚠️ No preserva el estado automáticamente
  • 💻 Usado por Vite, Webpack, Parcel, etc.
HMR: "Cambió el archivo CSS → Actualizo solo el CSS"
HMR: "Cambió el archivo JS → Actualizo ese módulo"

Fast Refresh

  • ⚛️ Tecnología específica de React
  • 🎯 Solo funciona con componentes de React
  • 💾 Preserva el estado de los componentes inteligentemente
  • 🔄 Re-renderiza solo los componentes que cambiaron
  • ✨ Construido sobre HMR (lo usa por debajo)
Fast Refresh: "Cambió el componente → Actualizo Y mantengo el estado"

En resumen

HMR = Reemplaza código sin recargar la página
Fast Refresh = HMR + Preservar estado de React

Fast Refresh usa HMR como base, pero añade inteligencia específica de React para mantener el estado.

Actualizando estado: Callback vs Valor directo

Ahora vamos a ver un problema común al actualizar el estado y cómo solucionarlo.

El problema

Intenta adivinar qué pasa cuando haces click en este botón:

function Contador() {
  const [count, setCount] = React.useState(0)

  const incrementarTresVeces = () => {
    setCount(count + 1)
    setCount(count + 1)
    setCount(count + 1)
  }

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={incrementarTresVeces}>+3</button>
    </div>
  )
}

¿El resultado? ❌ Solo suma 1, no 3

¿Por qué pasa esto?

Cuando llamas a setCount, React no actualiza el estado inmediatamente. Lo hace de forma asíncrona.

const incrementarTresVeces = () => {
  // En este momento, count = 0
  setCount(count + 1) // Programa: "poner en 0 + 1 = 1"
  setCount(count + 1) // Programa: "poner en 0 + 1 = 1"
  setCount(count + 1) // Programa: "poner en 0 + 1 = 1"
  // count sigue siendo 0 aquí

  // React aplica las actualizaciones después
  // Como todas dicen "poner en 1", el resultado es 1
}

Es como si dijeras tres veces: “pon el contador en 1”, en lugar de “suma 1 al contador”.

La solución: Usar un callback

La forma correcta es usar una función callback:

function Contador() {
  const [count, setCount] = React.useState(0)

  const incrementarTresVeces = () => {
    setCount((prevCount) => prevCount + 1)
    setCount((prevCount) => prevCount + 1)
    setCount((prevCount) => prevCount + 1)
  }

  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={incrementarTresVeces}>+3</button>
    </div>
  )
}

Ahora sí funciona correctamente: ✅ Suma 3

¿Cómo funciona el callback?

setCount((prevCount) => prevCount + 1)

Le dices a React: “Dame el valor más reciente y yo te devuelvo el nuevo valor”

const incrementarTresVeces = () => {
  // Primera actualización
  setCount((prevCount) => prevCount + 1) // prevCount = 0 → devuelve 1

  // Segunda actualización
  setCount((prevCount) => prevCount + 1) // prevCount = 1 → devuelve 2

  // Tercera actualización
  setCount((prevCount) => prevCount + 1) // prevCount = 2 → devuelve 3

  // Resultado final: 3 ✅
}

React procesa las actualizaciones en orden, usando siempre el valor más reciente.

¿Cuándo usar cada forma?

Valor directo (forma simple)

// ✅ Bien: el nuevo valor NO depende del anterior
setNombre('Miguel')
setMostrar(true)
setColor('#ff0000')

Usa esta forma cuando el nuevo valor es independiente del valor actual.

Callback (forma con función)

// ✅ Bien: el nuevo valor depende del anterior
setCount((prev) => prev + 1)
setItems((prevItems) => [...prevItems, nuevoItem])
setVisible((prev) => !prev)

Usa esta forma cuando:

  • ⚡ El nuevo valor depende del valor anterior
  • 🔄 Haces múltiples actualizaciones seguidas
  • 🎯 Quieres garantizar que usas el valor más reciente

Repaso final de la clase

  • 🔥 Fast Refresh - Tecnología de React que preserva el estado al guardar cambios
  • 🔄 HMR vs Fast Refresh - HMR es genérico, Fast Refresh es específico de React y preserva estado
  • 📝 Callback en setState - Usar función cuando el nuevo valor depende del anterior
  • ⚡ Múltiples actualizaciones - El callback garantiza que uses el valor más reciente
  • 🎯 Cuándo usar cada forma - Valor directo para independientes, callback para dependientes

💡 Recuerda: Usa setState((prev) => ...) cuando el nuevo valor depende del anterior. Fast Refresh hace que tu experiencia de desarrollo sea más fluida al mantener el estado mientras editas código.