SwiftUI @State y @Binding con ejemplos y explicación

SwiftUI ha revolucionado la forma en que desarrollamos interfaces en el ecosistema Apple. En lugar de construir vistas de forma imperativa, SwiftUI utiliza un modelo declarativo, donde la interfaz de usuario es una función del estado de los datos.

En el corazón de este sistema están dos propiedades fundamentales:
@State y @Binding.

Si estás empezando con SwiftUI o ya llevas tiempo trabajando con él, entender correctamente estos dos conceptos es absolutamente esencial. Una gran parte de los errores y comportamientos inesperados en SwiftUI vienen de no entender bien cómo fluye el estado entre las vistas.

En este tutorial aprenderás:

• Qué es el estado en SwiftUI
• Qué es @State
• Qué es @Binding
• Cómo se relacionan
• Cuándo usar cada uno
• Similitudes y diferencias
• Ejemplos reales en Xcode

1. El concepto de estado en SwiftUI

Antes de hablar de @State y @Binding, tenemos que entender qué significa estado en SwiftUI.

El estado es cualquier dato que afecta a lo que el usuario ve en pantalla.

Ejemplos de estado:

• Un texto que el usuario escribe
• Si un botón está activado o no
• Si una alerta está visible
• El valor de un contador
• Si un switch está encendido

En SwiftUI:

Cuando el estado cambia, la vista se vuelve a dibujar automáticamente

Eso es lo que hace que SwiftUI sea tan potente.

2. ¿Qué es @State?

@State es una propiedad que permite a una vista almacenar datos que pueden cambiar en el tiempo y que pertenecen a esa vista.

SwiftUI observa esa propiedad y, cuando cambia, vuelve a renderizar la vista.

Ejemplo simple:

struct ContentView: View {
    @State private var counter = 0

    var body: some View {
        VStack {
            Text("Counter: \(counter)")
            Button("Increment") {
                counter += 1
            }
        }
    }
}

Aquí:

• counter es el estado de la vista
• Cuando cambia, SwiftUI vuelve a dibujar el Text

¿Por qué usamos @State?

Porque las vistas en SwiftUI son structs, y los structs son inmutables por defecto.
@State permite a SwiftUI almacenar ese valor en memoria mutable externa.

3. Características clave de @State

• Pertenece a una vista
• Es la fuente original de la verdad (source of truth)
• Solo debe ser modificado por la vista que lo crea
• SwiftUI lo observa automáticamente

Regla de oro:

La vista que crea el estado lo posee

4. ¿Qué es @Binding?

@Binding no almacena datos.
@Binding es una referencia a un @State que vive en otra vista.

Es una forma de decir:

“No tengo este dato, pero tengo acceso para leerlo y modificarlo”

Ejemplo:

struct ParentView: View {
    @State private var isOn = false

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

struct ChildView: View {
    @Binding var isOn: Bool

    var body: some View {
        Toggle("Active", isOn: $isOn)
    }
}

Aquí:

• isOn vive en ParentView como @State
• ChildView recibe un @Binding
• Ambas vistas trabajan sobre el mismo valor

5. El símbolo $

Cuando pasamos un @State a un @Binding, usamos $.

Ejemplo:

$counter

Significa:

“Pasa una referencia al estado, no el valor”

• counter → valor
• $counter → binding

6. Flujo de datos en SwiftUI

SwiftUI usa un flujo de datos unidireccional:

@State (Padre) → @Binding (Hijo)

El padre:

• Crea y almacena el estado

El hijo:

• Lo usa y lo puede modificar

Pero el verdadero dueño sigue siendo el padre.

7. Similitudes entre @State y @Binding

Ambos están relacionados con el estado, y ambos provocan que la vista se actualice cuando cambian.

Similitudes:

8. Diferencias clave

Aquí está el punto más importante del artículo.

En una frase:

@State crea el estado, @Binding lo comparte

9. Error común: usar @State en una vista hija

Esto está mal:

struct ChildView: View {
    @State var text: String
}

Esto crea una copia, no un enlace.

La vista padre y la hija ya no están sincronizadas.

La forma correcta es:

struct ChildView: View {
    @Binding var text: String
}

10. Ejemplo real: formulario

Cada vez que el usuario escribe:

• El TextField cambia el @Binding
• Eso cambia el @State
• SwiftUI vuelve a dibujar ambas vistas

11. ¿Cuándo usar cada uno?

Usa @State cuando:

• La vista es dueña del dato
• Es un valor local
• No necesita ser compartido

Usa @Binding cuando:

• El dato viene de una vista padre
• Necesitas modificarlo
• No debes crear una copia

12. Regla mental para no equivocarte

Pregúntate:

¿Este valor vive en esta vista o viene de otra?

Si vive aquí → @State
Si viene de fuera → @Binding

13. Analogía sencilla

Imagina un interruptor:

• @State es el interruptor físico en la pared
• @Binding es un cable que conecta otro botón al mismo interruptor

No hay dos luces. Hay una sola fuente.

14. Conclusión

@State y @Binding son dos de los pilares más importantes de SwiftUI.
Dominar su relación es clave para construir aplicaciones robustas, limpias y sin errores.

• @State crea y controla datos
• @Binding los comparte entre vistas

Cuando entiendes esto, SwiftUI deja de parecer magia… y empieza a parecer ingeniería elegante.

Si tienes cualquier duda sobre este artículo, contacta conmigo y estaré encantado de ayudarte 🙂. Puedes contactar conmigo en mi perfil de X o en mi perfil de Instagram