Por qué deberías usar actualizaciones funcionales con setState en React

En React, cuando necesitas actualizar un estado basado en su valor anterior — como en casos reales de gestión de un carrito de compras o una lista de tareas — es fundamental usar la forma funcional de setState para evitar errores sutiles causados por estados desactualizados.

React agrupa (batch) las actualizaciones de estado para optimizar el rendimiento.
Si llamas a setState varias veces dentro del mismo ciclo de evento sin usar la forma funcional, es probable que cada llamada trabaje sobre una versión antigua del estado.

Ejemplo 1: Agregar productos a un carrito

Incorrecto:

setCart([...cart, newItem]);

Correcto:

setCart(prevCart => [...prevCart, newItem]);

Ejemplo 2: Incrementar contadores

Incorrecto:

setQuantity(quantity + 1);
setQuantity(quantity + 1);

Esperado: +2
Realidad: +1

Correcto:

setQuantity(prevQuantity => prevQuantity + 1);
setQuantity(prevQuantity => prevQuantity + 1);

¿Por qué importa?
En aplicaciones reales — especialmente cuando manejas actualizaciones concurrentes, patrones de UI optimista o interacciones de alta frecuencia — no usar la forma funcional puede provocar pérdida de datos, estados inconsistentes y bugs muy difíciles de rastrear.

La actualización funcional garantiza que setState siempre trabaje sobre el estado más reciente y correcto, independientemente de las renderizaciones o del agrupamiento de actualizaciones.

Regla de oro:
Si tu nuevo estado depende del anterior, siempre usa la forma funcional.