`Task` blocks main thread when calling async function inside

Question

I have an ObservableObject class and a SwiftUI view. When a button is tapped, I create a Task and call populate (an async function) from within it. I thought this would execute populate on a background thread but instead the entire UI freezes. Here's my code:

class ViewModel: ObservableObject {
    @Published var items = [String]()
    func populate() async {
        var items = [String]()
        for i in 0 ..< 4_000_000 { /// this usually takes a couple seconds
            items.append("\(i)")
        }
        self.items = items
    }
}

struct ContentView: View {
    @StateObject var model = ViewModel()
    @State var rotation = CGFloat(0)

    var body: some View {
        Button {
            Task {
                await model.populate()
            }
        } label: {
            Color.blue
                .frame(width: 300, height: 80)
                .overlay(
                    Text("\(model.items.count)")
                        .foregroundColor(.white)
                )
                .rotationEffect(.degrees(rotation))
        }
        .onAppear { /// should be a continuous rotation effect
            withAnimation(.easeInOut(duration: 2).repeatForever()) {
                rotation = 90
            }
        }
    }
}

Result:

The button stops moving, then suddenly snaps back when populate finishes.

Weirdly, if I move the Task into populate itself and get rid of the async, the rotation animation doesn't stutter so I think the loop actually got executed in the background. However I now get a Publishing changes from background threads is not allowed warning.

func populate() {
    Task {
        var items = [String]()
        for i in 0 ..< 4_000_000 {
            items.append("\(i)")
        }
        self.items = items /// Publishing changes from background threads is not allowed; make sure to publish values from the main thread (via operators like receive(on:)) on model updates.
    }
}

/// ...

Button {
    model.populate()
}

Result:

How can I ensure my code gets executed on a background thread? I think this might have something to do with MainActor but I'm not sure.

Answer 1

Consider:

func populate() async {
    var items = [String]()
    for i in 0 ..< 4_000_000 {
        items.append("\(i)")
    }
    self.items = items
}

You have marked populate with async, but there is nothing asynchronous here, and it will block the calling thread.

Then consider:

func populate() {
    Task {
        var items = [String]()
        for i in 0 ..< 4_000_000 {
            items.append("\(i)")
        }
        self.items = items
    }
}

That looks like it must be asynchronous, since it is launching a Task. But this Task runs on the same actor, and because the task is slow and synchronous, it will block the current executor.

If you do not want it to run on the main actor, you can either:

1. You can leave the view model on the main actor, but manually move the slow synchronous process to a detached task:

   @MainActor
   class ViewModel: ObservableObject {
       @Published var items = [String]()
   
       func populate() {
           Task.detached {
               var items = [String]()
               for i in 0 ..< .random(in: 4_000_000...5_000_000) { // made it random so I could see values change
                   items.append("\(i)")
               }
               await MainActor.run { [items] in
                   self.items = items
               }
           }
       }
   }
   

2. For the sake of completeness, you could also make the view model to be its own actor, and only designate the relevant observed properties as being on the main actor:

   actor ViewModel: ObservableObject {
       @MainActor
       @Published var items = [String]()
   
       func populate() {
           Task {
               var items = [String]()
               for i in 0 ..< .random(in: 4_000_000...5_000_000) { // made it random so I could see values change
                   items.append("\(i)")
               }
               await MainActor.run { [items] in
                   self.items = items
               }
           }
       }
   }
   

I would generally lean towards the former, but both approaches work.

Either way, it will allow the slow process to not block the main thread. Here I tapped on the button twice:

---

See WWDC 2021 videos Swift concurrency: Behind the scenes, Protect mutable state with Swift actors, and Swift concurrency: Update a sample app, all of which are useful when trying to grok the transition from GCD to Swift concurrency.

Answer 2

You can fix it by removing the class. You aren't using Combine so you don't need its ObservableObject and SwiftUI is most efficient if you stick to value types. The button doesn't hang with this design:

extension String {
    static func makeItems() async -> [String]{
        var items = [String]()
        for i in 0 ..< 4_000_000 { /// this usually takes a couple seconds
            items.append("\(i)")
        }
        return items
    }
}

struct AnimateContentView: View {
    @State var rotation = CGFloat(0)
    @State var items = [String]()
    
    var body: some View {
        Button {
            Task {
                items = await String.makeItems()
            }
        } label: {
            Color.blue
                .frame(width: 300, height: 80)
                .overlay(
                    Text("\(items.count)")
                        .foregroundColor(.white)
                )
                .rotationEffect(.degrees(rotation))
        }
        .onAppear { /// should be a continuous rotation effect
            withAnimation(.easeInOut(duration: 2).repeatForever()) {
                rotation = 90
            }
        }
    }
}

Answer 3

First, you can't have it both ways; Either you perform your CPU intensive work on the main thread (and have a negative impact on the UI) or you perform the work on another thread, but you need to explicitly dispatch the UI update onto the main thread.

However, what you are really asking about is

(By using Task) I thought this would execute populate on a background thread but instead the entire UI freezes.

When you use a Task you are using unstructured concurrency, and when you initialise your Task via init(priority:operation) the task ... inherits the priority and actor context of the caller.

While the Task is executed asynchronously, it does so using the actor context of the caller, which in the context of a View body is the main actor. This means that while your task is executed asynchronously, it still runs on the main thread and that thread is not available for UI updates while it is processing. So you are correct, this has everything to do with MainActor.

When you move the Task into populate it is no longer being created in a MainActor context and therefore does not execute on the main thread.

As you have discovered, you need to use this second approach to avoid the main thread. All you need to do to your code is move the final update back to the main queue using the MainActor:

func populate() {
    Task {
        var items = [String]()
        for i in 0 ..< 4_000_000 {
            items.append("\(i)")
        }
        await MainActor.run {
            self.items = items 
        }
    }
}

You could also use Task.detached() in the body context to create a Task that is not attached the MainActor context.

Answer 4

As others have mentioned, the reason of this behavior is that the Task.init inherits the actor context automatically. You're calling your function from the button callback:

Button {
    Task {
        await model.populate()
    }
} label: {

}

The button callback is on the main actor, so the closure passed to the Task initializer is on the main actor too.

One solution is using a detached task:

func populate() async {
    Task.detached {
        // Calculation here
    }
}

While detached tasks are unstructured, I'd like to suggest structured tasks like async let tasks:

@MainActor
class ViewModel: ObservableObject {
    @Published var items = [String]()

    func populate() async {
        async let newItems = { () -> [String] in
            var items = [String]()
            for i in 0 ..< 4_000_000 {
                items.append("\(i)")
            }
            return items
        }()

        items = await newItems
    }
}

This is useful when you want the populate function to return some value asynchronously. This structured task approach also means cancellation can be propagated automatically. For example, if you want to cancel the calculation when the button is tapped multiple times in a short time, you can do something like this:

@MainActor
class ViewModel: ObservableObject {
    @Published var items = [String]()

    func populate() async {
        async let newItems = { () -> [String] in
            var items = [String]()
            for i in 0 ..< 4_000_000 {
                // Stop in the middle if cancelled
                if i % 1000 == 0 && Task.isCancelled {
                    break
                }
                items.append("\(i)")
            }
            return items
        }()

        items = await newItems
    }
}

struct ContentView: View {
    @StateObject var model: ViewModel
    @State var task: Task<Void, Never>?

    init() {
        _model = StateObject(wrappedValue: ViewModel())
    }

    var body: some View {
        Button {
            task?.cancel() // Cancel previous task if any
            task = Task {
                await model.populate()
            }
        } label: {
            // ...
        }
    }
}

Moreover, withTaskGroup also creates structured tasks and you can avoid inheriting the actor context too. It can be useful when your computation has multiple child tasks that can progress concurrently.