Día 5 aprendiendo React: Batching y actualizaciones funcionales
Pensaba que llamar a un setter de estado varias veces provocaba múltiples renders.
Estaba equivocado.
React es más inteligente que eso. Utiliza un proceso llamado Automatic Batching.
En lugar de renderizar después de cada actualización, React las agrupa. Recopila todas las actualizaciones y realiza un único render. Esto mejora el rendimiento.
Esto es lo que aprendí hoy.
El proceso de Batching Cuando llamas a múltiples funciones de estado, React sigue este flujo:
- Ocurren múltiples actualizaciones de estado.
- React las agrupa (batching).
- React realiza un único render.
- React aplica los cambios a la UI.
El problema con las actualizaciones estándar Probé este código: setCount(count + 1); setCount(count + 1); setCount(count + 1);
Esperaba que el contador pasara de 0 a 3. Pasó de 0 a 1.
Esto sucede porque setCount(count + 1) no significa "incrementar el contador".
Significa "establecer el contador en este valor específico".
Si count es 0, cada línea le dice a React que establezca el contador en 1. React las agrupa y ve que la instrucción final es establecer el contador en 1.
La solución: Actualizaciones funcionales Para solucionar esto, debes usar una actualización funcional. Esta utiliza el estado más reciente disponible en la cola de actualizaciones.
La forma correcta: setCount((prev) => prev + 1);
Cuando usas este patrón, React le da a cada actualización el valor más reciente.
- Primera actualización: 0 + 1 = 1
- Segunda actualización: 1 + 1 = 2
- Tercera actualización: 2 + 1 = 3
Ahora el contador realmente llega a 3.
Un error común Una vez escribí: setCount((prev) => { prev + 1 });
El contador se volvió undefined.
Cuando usas llaves en una función de flecha, debes usar la palabra clave return.
Usa esto en su lugar:
setCount((prev) => prev + 1);
Conclusiones clave:
- React agrupa múltiples actualizaciones de estado para mejorar la velocidad.
- Las llamadas a
setStateno siempre activan renders inmediatos. - Las actualizaciones estándar utilizan el valor del ciclo de renderizado actual.
- Las actualizaciones funcionales utilizan el estado más reciente de la cola de actualizaciones.
- React utiliza una cola de actualizaciones (Update Queue) interna para gestionar estos cambios.