useState no se limita a números. Puedes guardar cualquier tipo de dato: strings, booleanos, arrays, objetos... Pero con arrays y objetos hay una regla crítica que debes dominar.
Los booleanos son perfectos para toggles: mostrar/ocultar, activar/desactivar, expandir/colapsar:
!isVisible invierte el valor: si era true, pasa a false, y viceversa.
Ideal para campos de texto:
Aquí viene lo más importante de esta lección. Con arrays y objetos, NUNCA debes mutar el estado directamente. Siempre debes crear una copia nueva.
¿Por qué? Porque React compara la referencia anterior con la nueva para decidir si re-renderizar. Si mutas el mismo objeto, la referencia no cambia y React piensa que nada cambió.
El spread ...user copia todas las propiedades, y luego name: 'Luis' sobrescribe solo esa.
Aquí es donde se combina todo. Imagina una lista de tareas:
| Operación | Mutar ❌ | Inmutable ✅ |
|---|---|---|
| Agregar | arr.push(x) | [...arr, x] |
| Eliminar | arr.splice(i, 1) | arr.filter(...) |
| Modificar | arr[i] = x | arr.map(...) |
| Actualizar objeto | obj.key = x | {...obj, key: x} |
Construye una lista de tareas donde puedas:
[...todos, nueva]).filter()).map() y spread)La inmutabilidad puede parecer engorrosa al principio, pero es la que hace que React sea predecible y rápido. Una vez que la domines, será como respirar.