SwiftUI Performance

Slow code is a bug — Just ask your users …

Focusing on Mobile UI Performance

To be or To be a mobile developer? Yes!

UI Performance Optimization for Android & iOS …

In Android’s Jetpack Compose and iOS’s SwiftUI, creating smooth, high-performance interfaces is all about keeping views stateless and side-effect-free. By making Composables in Android stateless — where they focus solely on presenting passed-in data without altering it — we increase reusability and reduce the risk of unintended behaviors. Complex interfaces are built from simpler Composables with limited dependencies, reducing unnecessary recompositions.

Across both platforms, the shared goal is to minimize dependencies and trigger updates only when essential, ensuring a more efficient and responsive UI. Jetpack Compose and SwiftUI manage this by organizing views around three essential concepts: identity, lifetime, and dependencies.

Core Concepts Across iOS and Android

1. Identity

• In Compose, unique identifiers are used to track whether an item in a list or a remembered block should be re-created. For instance, key in remember blocks and id in LazyColumn items ensure that Compose recognizes which items are the same and which are new.
• In SwiftUI, identity functions similarly, using properties like .id to differentiate items in lists. Both systems track views by identity to prevent redundant rendering, aiding in performance optimization by avoiding the unintended recreation of components.

2. Lifetime

• In Compose, remember and rememberSaveable handle view lifecycle and persistence by storing data through re-compositions. This mimics SwiftUI’s @State, allowing state to persist even when a view hierarchy is rebuilt. The key is to minimize the scope of persistence, which reduces memory usage and ensures that only necessary data remains active.
• Similarly, in SwiftUI, @State helps track a view’s lifecycle and retains state as long as the view is active. If a view hierarchy is altered, SwiftUI destroys and rebuilds affected states accordingly. Managing lifetime thoughtfully in both platforms reduces memory overhead and optimizes rendering.

3. Dependencies

• Limiting dependencies is central to both Jetpack Compose and SwiftUI, reducing unnecessary re-compositions (Android) or updates (iOS) by isolating changes only to necessary data. Dependency injection is implemented through parameters in @Composable functions in Compose, reducing the view’s reliance on global data. LaunchedEffect can be used to run side effects only when dependencies change.
• In SwiftUI, dependencies are tracked in a dependency graph, automatically updating only views that rely on changed data. Property wrappers like @Environment and @Binding provide an efficient way to pass in dependencies while keeping the view hierarchy uncluttered.

Keeping all this in mind: Together, these principles of identity, lifetime, and dependency management in Jetpack Compose and SwiftUI create a performance-focused approach to UI development. By controlling state persistence, limiting unnecessary updates, and thoughtfully managing dependencies, both platforms enable developers to build smooth, responsive apps that handle complex interfaces without sacrificing performance.

Note: In iOS 18+, SwiftUI provides refined state management through five primary property wrappers, enhancing control over view updates and state persistence:

• @State: Manages local, mutable state within a view, ideal for view-specific data.
• @Binding: Allows child views to read and modify the parent’s @State, creating a two-way binding.
• @Environment: Injects environmental data, like system-wide settings, into a view hierarchy.
• @Observable: New in iOS 18+, replacing @ObservedObject, to simplify external state observation.
• @Bindable: Enhances @Observable by allowing direct data binding, reducing boilerplate code for data updates.

Overview

Optimizing SwiftUI performance is essential for delivering smooth and responsive user experiences. In this article, we delve deep into the key concepts and focus on identity, lifetime, and dependencies. We’ll explore what each concept entails and provide detailed strategies to enhance performance in your SwiftUI applications.

SwiftUI is a declarative UI framework that simplifies the design and construction of user interfaces for iOS, macOS, tvOS, and watchOS apps. Despite being relatively new, SwiftUI has rapidly gained popularity due to its intuitive syntax and powerful capabilities. Understanding and optimizing its core principles — identity, lifetime, and dependencies — is crucial for building robust and high-performance SwiftUI applications. This article breaks down these concepts and offers practical tips and tricks to leverage SwiftUI effectively.

SwiftUI is a declarative UI framework that allows developers to describe the desired state of their user interface, with SwiftUI handling the rendering and updates automatically. This contrasts with traditional imperative frameworks like UIKit or AppKit, where developers manually manage view hierarchies and state changes.

Key Features:

• Declarative Syntax: Define what the UI should look like for a given state, and SwiftUI takes care of the how.
• Composable Views: Build complex interfaces by combining simple, reusable views.
• State Management: Easily manage and react to state changes with property wrappers like @State, @Binding, and @ObservedObject.
• Modifiers: Apply transformations and behaviors to views in a chainable manner.

Benefits:

• Simplified Code: Reduce boilerplate and enhance readability.
• Dynamic Updates: Automatic UI updates in response to state changes.
• Cross-Platform Support: Write once and deploy across multiple Apple platforms.

The Three Concepts of SwiftUI: Identity, Lifetime, and Dependencies

To harness the full potential of SwiftUI and optimize performance, it’s essential to grasp its foundational concepts:

• Identity:
  The identity of a view is what makes it unique. SwiftUI uses identity to decide if two views are the same or different when rendering and updating. Optimizing identity is crucial to avoid unnecessary re-renders.

WWDC 2021

• Lifetime:
  The lifetime of a view is the period during which it exists. SwiftUI creates views when they are needed and destroys them when they are no longer required, based on dependencies.

WWDC 2021

1. Dependencies:
   The dependencies of a view include the other views or data it relies on. SwiftUI automatically updates views whenever their dependencies change. Managing dependencies effectively ensures that views are only updated when absolutely necessary, avoiding performance bottlenecks.

Understanding these concepts helps in structuring your SwiftUI views and state management strategies to minimize unnecessary computations and re-renders, thereby enhancing performance.

Important Key Points

Make SwiftUI Performant

Introduction to SwiftUI’s Declarative Model

The Declarative Approach in SwiftUI

SwiftUI adopts a declarative programming model, where developers specify what the UI should display rather than how to display it. This approach allows SwiftUI to handle the underlying mechanics of view rendering and state synchronization, leading to more concise and maintainable code.

Review Core Concepts: Identity, Lifetime, and Dependencies

• Identity: Ensures SwiftUI can accurately track and update views.
• Lifetime: Controls how long a view and its state persist.
• Dependencies: Manages the data flow and relationships between views.

By mastering these concepts, developers can create efficient and scalable SwiftUI applications.

1. Identity in SwiftUI

What It Is

Identity in SwiftUI determines how the framework distinguishes one view from another. Properly managing identity ensures that SwiftUI can efficiently update, reuse, and animate views without unnecessary re-creation.

There are two primary types of identity in SwiftUI:

• Explicit Identity: Manually assigned identifiers using modifiers like .id(). This is particularly useful for dynamic content such as lists or grids where items can be added, removed, or reordered.
• Structural Identity: Inferred by SwiftUI based on the view hierarchy and position. If two views have the same type and structure in the hierarchy, SwiftUI treats them as the same view.

How to Make It Performant

1. Explicit Identity:

• Use Unique Identifiers: Assign unique and stable identifiers to views that represent dynamic data. This allows SwiftUI to track and update only the affected views efficiently.

ForEach(items, id: \.uniqueID) { item in
    Text(item.name)
        .id(item.uniqueID) // Explicit identity
}

• Consistent Identifiers: Ensure that identifiers remain consistent across view updates to prevent unnecessary view destruction and re-creation.

2. Structural Identity:

• Maintain Consistent Hierarchy: Avoid frequent structural changes in the view hierarchy that can confuse SwiftUI’s inference mechanism. Consistent structure allows SwiftUI to optimize view reuse effectively.

VStack {
    if isVisible {
        Text("Visible View") // Structural identity based on position
    }
}

• Minimize Conditional Views: Excessive use of conditional views (if, else) can lead to frequent identity changes. Where possible, use compositional approaches to reduce reliance on conditional rendering.

3. Best Practices for View Transitions:

• Animate with Identity: When animating views, ensure that identity remains stable to allow smooth transitions.

Explore SwiftUI animation - WWDC23 - Videos - Apple Developer

• Reuse Views: Design views to be reusable with explicit identifiers, enabling SwiftUI to manage their lifecycle efficiently.

2. State and Lifetime in SwiftUI

This is important

What It Is

In SwiftUI, lifetime refers to the period during which a view and its associated state exist. SwiftUI automatically handles view creation and destruction based on dependencies and state changes, ensuring views are not unnecessarily recreated, which can degrade performance.

SwiftUI in iOS 18+ uses these key property wrappers to manage state and lifetime:

• @State: Manages local, mutable state within a view, ideal for view-specific data.
• @Binding: Enables child views to read and modify the parent’s @State, creating two-way data binding.
• @Environment: Injects shared data, like system settings, into a view hierarchy.
• @Observable: Replaces @ObservedObject to simplify observing external objects, automatically updating views when the observed data changes.
• @Bindable: Complements @Observable by allowing direct data binding within @Observable objects, reducing boilerplate code.

How to Make It Performant

1. Use @State Wisely: Reserve @State for simple, localized state within a single view. Avoid using it for complex data to prevent unnecessary view updates.

2. Leverage @StateObject for Persistent Objects: For persistent view models, use @StateObject to maintain objects that need to survive view re-creations.

3. Optimize @Observable Usage:

• Scoped Observations: Observe only essential properties to reduce update scope.
• Efficient Updates: Rely on @Bindable to streamline data changes and minimize redundant updates.

4. Avoid Unnecessary State Changes:

• Batch Updates: Group related changes to reduce re-renders.

withAnimation {
    isOn.toggle()
    anotherState.toggle()
}

5. Conditional Updates: Only update state when necessary, avoiding redundant updates.

if newValue != oldValue {
    self.state = newValue
}

6. Preserve User Input and State: Use @StateObject to retain critical data across transitions, preventing data loss.

@StateObject private var formViewModel = FormViewModel()

By managing state carefully, SwiftUI developers can ensure optimal performance and a seamless user experience.

NOTE: In iOS 18+, @Observable is the recommended choice for a view model, as it simplifies state management by automatically notifying views of changes. This property wrapper replaces @ObservedObject, allowing SwiftUI views to react to updates without extra setup. To further optimize, @Bindable can be used within @Observable objects for properties that require direct data binding, reducing boilerplate and ensuring a more streamlined interaction between views and view models.

@Observable class ViewModel {
    @Bindable var text: String = ""
}

3. Dependencies and Performance in SwiftUI

What It Is

In SwiftUI, dependencies define the relationships between views and the data they rely on. SwiftUI tracks these dependencies using a dependency graph, ensuring automatic view updates when data changes. Efficient dependency management is essential for performance, as mismanagement can lead to unnecessary view updates and slow down the app.

Key Dependency Property Wrappers in iOS 18+

• @State and @Binding: Manage and share local state within and between views.
• @Observable: Replaces @ObservedObject, observing complex data models with automatic view updates.
• @Environment: Access global settings and shared data across views.

How to Make Dependencies Performant

1. Minimize Dependency Scope

• Localized State: Limit state scope to minimize updates. Only pass the necessary data or bindings to child views to prevent broad updates.

struct ParentView: View {
    @State private var parentState: Bool = false
    var body: some View { ChildView(isActive: $parentState) }
}

struct ChildView: View {
    @Binding var isActive: Bool
    var body: some View { Toggle("Active", isOn: $isActive) }
}

2. Use Memoization

• Cache Expensive Computations: Prevent repetitive calculations by caching results, especially for costly operations that could otherwise slow down view updates.

func expensiveCalculation(input: Int) -> Int {
    // Perform heavy computation
}

var body: some View {
    let result = expensiveCalculation(input: 10) // Consider caching
    Text("\(result)")
}

• To cache an expensive calculation and move it to a background thread using Swift’s structured concurrency in SwiftUI, we can use @State to store the result and Task to perform the computation asynchronously. Here’s an optimized example:

@State private var result: Int?

func calculate() async {
    result = await Task.detached {
        expensiveCalculation(input: 10)
    }.value
}

var body: some View {
    VStack {
        if let result = result {
            Text("\(result)")
        } else {
            ProgressView("Calculating...")
                .task {
                    await calculate()
                }
        }
    }
}

func expensiveCalculation(input: Int) -> Int {
    // Perform heavy computation
}

3. Leverage @Environment

• Use @Environment for global values that rarely change, minimizing the impact of dependency-induced updates.

@Environment(\.colorScheme) var colorScheme

4. Optimize @Binding and @Environment Usage

• Selective Environment Use: Use @Environment sparingly for truly global data, as excessive use can lead to broad updates. For example:

@EnvironmentObject var userSettings: UserSettings

• Scoped @Binding for Efficiency: Prefer @Binding for localized state sharing between parent and child views to keep updates efficient.

5. Stable Identifiers

• Consistent Identifiers: In dynamic views like ForEach, use stable identifiers to avoid unnecessary re-renders.

ForEach(items, id: \.id) { item in
    Text(item.name)
}

• Avoid Changing Identifiers: Frequently changing identifiers can cause SwiftUI to treat views as new, leading to re-renders and potential state loss.

struct ContentView: View {
    @StateObject private var viewModel = ViewModel()
    var body: some View {
        List(viewModel.items, id: \.id) { item in
            Text(item.name)
        }
    }
}

By managing dependencies effectively, you ensure only necessary UI components update, resulting in a more responsive, optimized app experience.

Building on this …

Demystify SwiftUI performance - WWDC23 - Videos - Apple Developer

Let’s look at the code and the UI graph.

SwiftUI Code and how SwiftUI see the UI Graph

Each element updates when it’s dependencies updates. We can see with …

let _ = Self._printChages()

we see that `ScalableDogImage` is keying on “dog” when all it needs is just the image. So if we just key on “dog.image” we do not re-render every time anything in dog changes but only when the image changes (almost never)

ScalableDogImage(dog.image) // reduce the dependancies to just the image

We can also move the header view into its own SwiftUI `DogHeader` view.

struct DogView: View {
    ...
   DogHeader(name: dog.name, breed: dog.breed)
   ScalableDogImage(dog.image)
   DogDetailView(dog)
   LetsPlayButton().disabled(dog.isTired)
  }
 }
}

• Eliminate unnecessary dependencies
• Extract views if needed
• Explore using Observable

Common sources of slow update

• Dynamic properties — Try to move this to a background task.
• Expensive view
• Slow identification

Identity in List and Tables

Important feartures:

• Construction affects performance
• Gather IDs eagerly to ensure consistency
• Row count is determined from content

Why identity matters:

• Animations: incremental updates to the same view vs a new view
• Performance: identifiers are gathered often

ForEach layout of views

This works great when the number of rows are known!

New in iOS 17 we can just use ForEach with our collection for a TableView!

New in iOS 17!

Faster lists and tables

• Ensure identifiers are inexpensive
• Consider the number of rows in ForEach content

SwiftUI Dependancy optimization

4. Performance Optimization Techniques

What It Is

Performance optimization in SwiftUI focuses on minimizing resource usage, reducing recompositions, and optimizing view updates. These techniques lead to faster load times, smoother animations, and a more responsive UI.

How to Make It Performant

1. Avoid Excessive Re-renders and Recalculations

• Simplify View Hierarchies: Deeply nested views slow rendering. Break down complex views into smaller components for easier updates and better organization.

struct ParentView: View {
    var body: some View {
        VStack {
            HeaderView()
            ContentView()
            FooterView()
        }
    }
}

• Leverage Lazy Containers: Use LazyVStack, LazyHStack, or LazyGrid for large datasets to load views on demand, reducing memory use and improving scroll performance.

ScrollView {
    LazyVStack {
        ForEach(largeDataSet) { item in
            Text(item.name)
        }
    }
}

2. Minimize Expensive Calculations

• Move Heavy Computations Off the Main Thread: Use Swift’s structured concurrency to run costly computations in the background, preventing UI freezes.

@State private var result: Int?

func calculate() async {
    result = await Task.detached {
        expensiveCalculation()
    }.value
}

var body: some View {
    Text(result.map { "\($0)" } ?? "Calculating...")
        .task { await calculate() }
}

• Use Memoization Techniques: Cache results of expensive functions to avoid redundant calculations during updates.

@State private var cachedResult: Int?

var body: some View {
    Text("\(cachedResult ?? computeExpensiveValue())")
        .onAppear {
            if cachedResult == nil {
                cachedResult = computeExpensiveValue()
            }
        }
}

3. Efficient Handling of View Hierarchies

• Flatten View Structures: Reducing view depth speeds up layout and rendering.

// Before
VStack {
    HStack {
        Text("Hello")
    }
}

// After
Text("Hello")

• Reuse Components: Creating reusable components leverages SwiftUI’s caching, improving efficiency.

struct CustomButton: View {
    var title: String
    var action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .padding()
                .background(Color.blue)
                .foregroundColor(.white)
                .cornerRadius(8)
        }
    }
}

4. Avoid Performance Pitfalls Like AnyView

• Maintain Type Safety: AnyView erases type information, which hinders SwiftUI’s optimization capabilities. Use explicit types whenever possible to keep views efficient.

// Instead of using AnyView
if condition {
    Text("Condition True")
} else {
    Image(systemName: "star")
}

By thoughtfully managing view hierarchies, dependencies, and resource-intensive tasks, you can ensure your SwiftUI app remains responsive and performant.

Advanced Techniques and Debugging Performance with SwiftUI Tools

SwiftUI provides robust tools for diagnosing and improving app performance:

• Instruments: Profile your app to identify bottlenecks, pinpoint slow areas, and understand where SwiftUI spends time rendering views.
• Debug Navigator: Monitor real-time CPU and memory usage to ensure efficient resource consumption.
• SwiftUI Tracing: Use trace logs to analyze how views are updated, helping detect and address inefficiencies.

Conclusion: Building High-Performance SwiftUI Apps

SwiftUI’s declarative nature simplifies UI development but optimizing performance requires understanding identity, lifetime, and dependencies. By managing state, minimizing view hierarchies, and leveraging SwiftUI’s tools, you ensure a responsive, high-performing app. Implementing these best practices not only delivers a smoother user experience but also scales efficiently, empowering you to maximize the full potential of SwiftUI. For further insights, refer to Apple Developer website.