@State — qué es, propósito y uso en SwiftUI

¿Qué es @State en SwiftUI?

@State es un Property Wrapper integrado en SwiftUI que permite a una vista almacenar y rastrear su propio estado. Cuando un valor @State cambia, SwiftUI redibuja automáticamente la vista reinvocando la propiedad body. Esta es la base de la programación reactiva en SwiftUI: el desarrollador declara el estado y el framework se encarga de la sincronización de la interfaz.

@State crea un área de almacenamiento en el heap gestionada por SwiftUI. Esta área es persistente — sobrevive a inicializaciones repetidas de la estructura de la vista, que ocurren en cada renderizado. SwiftUI utiliza el identificador de la vista (generado a partir de su posición en la jerarquía) para vincular la propiedad @State a una vista específica. Gracias a esto, el estado no se restablece cuando se actualiza la vista padre.

Una limitación importante: @State está diseñado solo para tipos de valor (structs, enums, primitivos). Para tipos de referencia (clases), usa @StateObject o @ObservedObject. Si asignas una clase a una propiedad @State, SwiftUI no podrá detectar cambios dentro del objeto — solo un reemplazo completo de la referencia.

¿Cómo funciona @State internamente?

SwiftUI implementa @State a través de un mecanismo interno de Storage. Cada propiedad @State obtiene una celda de memoria dedicada almacenada en un contenedor de almacenamiento especial de la vista. Cuando ocurre una escritura en wrappedValue, SwiftUI notifica a su grafo de dependencias mediante didSet sobre la necesidad de redibujar.

struct ContentView: View {
    @State private var name: String = "User"
    @State private var isLoggedIn: Bool = false

    var body: some View {
        VStack {
            Text("Hola, \(name)")
            Button(isLoggedIn ? "Cerrar sesión" : "Iniciar sesión") {
                isLoggedIn.toggle()
            }
        }
    }
}

En el ejemplo, hay dos propiedades @State: name (String) e isLoggedIn (Bool). Cuando se llama a isLoggedIn.toggle(), SwiftUI marca ContentView como necesitada de actualización y reinvoca body en el siguiente ciclo de renderizado. El punto clave: las propiedades @State siempre se declaran con el modificador private — esto indica que el estado pertenece exclusivamente a la vista actual y no debe cambiarse desde fuera directamente.

Para observar cambios, SwiftUI utiliza CurrentValueSubject de Combine. Cada propiedad @State crea un publicador oculto que notifica al sistema en cada cambio. Esto permite a SwiftUI redibujar solo el conjunto mínimo necesario de vistas, evitando actualizaciones completas de la jerarquía.

Cuándo usar @State en un proyecto

@State es óptimo para estados locales simples: campos de texto en búsqueda, indicadores booleanos para ventanas modales, interruptores de configuración, contadores, elementos seleccionados de lista. Si un valor se usa solo en una vista y sus componentes hijos (a través de @Binding), @State es la elección correcta. Para estados que deben sobrevivir al cierre de la vista (por ejemplo, datos de formulario), @State también funciona mientras la vista permanezca en la jerarquía.

• Campos de texto — @State para almacenar texto ingresado en TextField
• Indicadores booleanos — @State para mostrar/ocultar ventanas modales y sheets
• Selección de elementos — @State para rastrear la pestaña o fila seleccionada
• Contadores — @State para valores numéricos con incremento/decremento
• Cálculos intermedios — @State para almacenar en caché resultados dentro de una vista

No uses @State para estados globales de la aplicación, almacenamiento en caché de datos de red u objetos que se usan en múltiples pantallas. @StateObject y @EnvironmentObject están diseñados para estos propósitos. Además, @State no es adecuado para almacenar grandes cantidades de datos — cada cambio redibujará toda la vista.

@State y @Binding: trabajo conjunto

@Binding es un puente entre @State en una vista padre y una vista hija que necesita modificar ese estado. El padre declara @State, y el componente hijo recibe un Binding a través de la proyección $. Cambiar el Binding en la vista hija actualiza automáticamente el @State en el padre — y viceversa. Esto garantiza un flujo de datos unidireccional con capacidad de retroalimentación.

struct ParentView: View {
    @State private var text: String = ""

    var body: some View {
        ChildView(text: $text)
    }
}

struct ChildView: View {
    @Binding var text: String

    var body: some View {
        TextField("Enter text", text: $text)
    }
}

En el listado, ParentView posee el @State text, y ChildView recibe $text como Binding. El TextField dentro de ChildView se vincula a este Binding mediante text: $text. Cuando el usuario escribe en el TextField, el valor cambia en ChildView a través del Binding, lo que provoca una actualización de @State en ParentView. Ambas vistas se redibujan con el nuevo valor.

Errores típicos al trabajar con @State

El error más común es asignar una clase a una propiedad @State. Si escribes @State var model = MyClass(), SwiftUI no podrá rastrear cambios en las propiedades dentro de la clase — solo el reemplazo del objeto. Para clases, usa siempre @StateObject. El segundo problema común es declarar @State sin el modificador private, lo que viola el principio de encapsulación del estado.

Pasar @State directamente a una vista hija sin $ es otro error típico. Si pasas TextField(text: text) en lugar de TextField(text: $text), el componente hijo recibe solo una cadena, no un Binding. Los cambios de texto en el TextField no se sincronizarán con el @State del padre. Usa siempre la proyección $ para pasar Binding.

El tercer error son múltiples propiedades @State para datos relacionados. Si varios valores forman lógicamente un todo único (por ejemplo, campos de formulario), combínalos en una sola estructura con un único @State. Esto simplifica el paso de estado a las vistas hijas y reduce el número de desencadenantes de actualización individuales.

Ejemplos de uso de @State en SwiftUI

@State se utiliza en la mayoría de los proyectos SwiftUI para la interactividad básica. Consideremos un ejemplo de formulario de inicio de sesión donde @State gestiona los campos de texto y el estado de carga. Este patrón aparece en cada aplicación — desde notas simples hasta soluciones empresariales complejas.

struct LoginView: View {
    @State private var email: String = ""
    @State private var password: String = ""
    @State private var isLoading: Bool = false
    @State private var errorMessage: String?

    var body: some View {
        Form {
            TextField("Email", text: $email)
            SecureField("Password", text: $password)
            Button("Iniciar sesión") {
                login()
            }.disabled(isLoading)
        }
    }

    private func login() {
        isLoading = true
        // Realizar solicitud de red
    }
}

En el ejemplo, hay cuatro propiedades @State: email y password para los campos del formulario, isLoading para la indicación de carga, y errorMessage para mostrar errores. Cada propiedad gestiona independientemente su parte de la interfaz. Cuando isLoading cambia, el botón se desactiva automáticamente mediante disabled(isLoading) — sin actualización manual de la UI.