swiftui-patterns

Patrones SwiftUI

Patrones modernos de SwiftUI para construir interfaces de usuario declarativas y de alto rendimiento en plataformas Apple. Cubre el framework Observation, composición de vistas, navegación tipo-segura y optimización del rendimiento.

Cuándo Activarlo

• Construir vistas SwiftUI y gestionar estado (@State, @Observable, @Binding)
• Diseñar flujos de navegación con NavigationStack
• Estructurar modelos de vista y flujo de datos
• Optimizar el rendimiento de renderizado para listas y diseños complejos
• Trabajar con valores de entorno e inyección de dependencias en SwiftUI

Gestión de Estado

Selección de Property Wrapper

Elige el wrapper más simple que se ajuste:

Wrapper	Caso de Uso
@State	Tipos valor locales a la vista (toggles, campos de formulario, presentación de hojas)
@Binding	Referencia bidireccional al @State del padre
Clase @Observable + @State	Modelo propio con múltiples propiedades
Clase @Observable (sin wrapper)	Referencia de solo lectura pasada desde el padre
@Bindable	Enlace bidireccional a una propiedad de @Observable
@Environment	Dependencias compartidas inyectadas mediante .environment()

ViewModel con @Observable

Usa @Observable (no ObservableObject): rastrea cambios a nivel de propiedad para que SwiftUI solo vuelva a renderizar las vistas que leen la propiedad modificada:

@Observable
final class ItemListViewModel {
    private(set) var items: [Item] = []
    private(set) var isLoading = false
    var searchText = ""

    private let repository: any ItemRepository

    init(repository: any ItemRepository = DefaultItemRepository()) {
        self.repository = repository
    }

    func load() async {
        isLoading = true
        defer { isLoading = false }
        items = (try? await repository.fetchAll()) ?? []
    }
}

Vista que Consume el ViewModel

struct ItemListView: View {
    @State private var viewModel: ItemListViewModel

    init(viewModel: ItemListViewModel = ItemListViewModel()) {
        _viewModel = State(initialValue: viewModel)
    }

    var body: some View {
        List(viewModel.items) { item in
            ItemRow(item: item)
        }
        .searchable(text: $viewModel.searchText)
        .overlay { if viewModel.isLoading { ProgressView() } }
        .task { await viewModel.load() }
    }
}

Inyección de Entorno

Reemplaza @EnvironmentObject con @Environment:

// Inyectar
ContentView()
    .environment(authManager)

// Consumir
struct ProfileView: View {
    @Environment(AuthManager.self) private var auth

    var body: some View {
        Text(auth.currentUser?.name ?? "Invitado")
    }
}

Composición de Vistas

Extraer Subvistas para Limitar Invalidaciones

Divide las vistas en structs pequeños y enfocados. Cuando el estado cambia, solo se vuelve a renderizar la subvista que lee ese estado:

struct OrderView: View {
    @State private var viewModel = OrderViewModel()

    var body: some View {
        VStack {
            OrderHeader(title: viewModel.title)
            OrderItemList(items: viewModel.items)
            OrderTotal(total: viewModel.total)
        }
    }
}

ViewModifier para Estilos Reutilizables

struct CardModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

extension View {
    func cardStyle() -> some View {
        modifier(CardModifier())
    }
}

Navegación

NavigationStack Tipo-Seguro

Usa NavigationStack con NavigationPath para enrutamiento programático y tipo-seguro:

@Observable
final class Router {
    var path = NavigationPath()

    func navigate(to destination: Destination) {
        path.append(destination)
    }

    func popToRoot() {
        path = NavigationPath()
    }
}

enum Destination: Hashable {
    case detail(Item.ID)
    case settings
    case profile(User.ID)
}

struct RootView: View {
    @State private var router = Router()

    var body: some View {
        NavigationStack(path: $router.path) {
            HomeView()
                .navigationDestination(for: Destination.self) { dest in
                    switch dest {
                    case .detail(let id): ItemDetailView(itemID: id)
                    case .settings: SettingsView()
                    case .profile(let id): ProfileView(userID: id)
                    }
                }
        }
        .environment(router)
    }
}

Rendimiento

Usar Contenedores Lazy para Colecciones Grandes

LazyVStack y LazyHStack crean vistas solo cuando son visibles:

ScrollView {
    LazyVStack(spacing: 8) {
        ForEach(items) { item in
            ItemRow(item: item)
        }
    }
}

Identificadores Estables

Usa siempre IDs estables y únicos en ForEach; evita usar índices de array:

// Usar conformidad Identifiable o id explícito
ForEach(items, id: \.stableID) { item in
    ItemRow(item: item)
}

Evitar Trabajo Costoso en body

• Nunca realices I/O, llamadas de red o cálculos pesados dentro de body
• Usa .task {} para trabajo asíncrono; se cancela automáticamente cuando la vista desaparece
• Usa .sensoryFeedback() y .geometryGroup() con moderación en scroll views
• Minimiza .shadow(), .blur() y .mask() en listas; disparan renderizado fuera de pantalla

Conformidad Equatable

Para vistas con cuerpos costosos, conforma a Equatable para omitir renderizados innecesarios:

struct ExpensiveChartView: View, Equatable {
    let dataPoints: [DataPoint] // DataPoint debe cumplir con Equatable

    static func == (lhs: Self, rhs: Self) -> Bool {
        lhs.dataPoints == rhs.dataPoints
    }

    var body: some View {
        // Renderizado complejo del gráfico
    }
}

Previsualizaciones

Usa la macro #Preview con datos mock en línea para iteración rápida:

#Preview("Estado vacío") {
    ItemListView(viewModel: ItemListViewModel(repository: EmptyMockRepository()))
}

#Preview("Cargado") {
    ItemListView(viewModel: ItemListViewModel(repository: PopulatedMockRepository()))
}

Antipatrones a Evitar

• Usar ObservableObject / @Published / @StateObject / @EnvironmentObject en código nuevo; migrar a @Observable
• Poner trabajo asíncrono directamente en body o init; usar .task {} o métodos de carga explícitos
• Crear modelos de vista como @State dentro de vistas hijas que no poseen los datos; pasar desde el padre en su lugar
• Usar borrado de tipo AnyView; preferir @ViewBuilder o Group para vistas condicionales
• Ignorar los requisitos de Sendable al pasar datos hacia/desde actores

Referencias

Ver skill: swift-actor-persistence para patrones de persistencia basados en actores. Ver skill: swift-protocol-di-testing para DI basada en protocolos y pruebas con Swift Testing.