SwiftUI .task() vs .onAppear()

Apr 22, 2023#swiftui #swift #ios

In SwiftUI, both .task() and .onAppear() are view modifiers that can be used to run some code when a view is shown. The exact moment that SwiftUI calls these methods depends on the specific view type that you apply to, but the action closures complete before the first rendered frame appears.

// iOS 13.0+, macOS 10.15+, watchOS 6.0+
func onAppear(perform action: (() -> Void)? = nil) -> some View

// iOS 15.0+, macOS 12.0+, watchOS 8.0+
func task(
  priority: TaskPriority = .userInitiated,
  _ action: @escaping () async -> Void
) -> some View

// iOS 15.0+, macOS 12.0+, watchOS 8.0+
func task<T>(
  id value: T,
  priority: TaskPriority = .userInitiated,
  _ action: @escaping () async -> Void
) -> some View where T : Equatable

In general, .task() is a more powerful and convenient modifier than .onAppear() for running asynchronous work when a view is shown. However, it is only available in iOS 15+, so you may need to use .onAppear() for backward compatibility. You can always use .onAppear() with Task to replicate what .task() does.

There are some differences between them:

Newer modifer .task() allows you to use the async/await directly to perform asynchronous work. While .onAppear() is an older modifier that can only run synchronous code, you need to use Task or DispatchQueue to bridge to async code.

struct ContentView: View {
  @State var text: String = "Loading..."

  // Async function
  func asyncGetText() async -> String {
    // Simulate some network request
    await Task.sleep(3_000_000_000)
    return "Hello, world!"
  }

  var body: some View {
    Text(text)
      .padding()
      // Start a task when the view is shown
      .task {
        // Await the result of the async function
        let result = await asyncGetText()
        // Update the state with the result
        text = result
      }
  }
}

Similar example but using .onAppear():

struct ContentView: View {
  /* ... */

  var body: some View {
    Text(text)
      .padding()
      // Run some code when the view is shown
      .onAppear {
        // Start a task to call the async function
        Task {
          // Await the result of the async function
          let result = await asyncGetText()
          // Update the state with the result
          text = result
        }
      }
  }
}

Modifer .task() will automatically cancel the task when the view is destroyed, if it has not already finished. .onAppear() does not have this feature, so you may need to manually cancel any ongoing work in .onDisappear().

struct ContentView: View {
  /* ... */
  private var task: Task<Void, Never>?  // reference to the task

  var body: some View {
    Text(text)
      .padding()
      // Run some code when the view is shown
      .onAppear {
        // Start a task to call the async function
        task = Task {
          // Await the result of the async function
          let result = await asyncGetText()
          // Update the state with the result
          text = result
        }
      }
      // Run some code when the view is hidden
      .onDisappear {
        // Cancel the task if it is not finished
        task?.cancel()
      }
  }
}

Modifier .task() can take an id parameter that allows you to cancel and restart the task when the value changes. For example, you can use this to listen to notifications or update data based on some state. .onAppear() does not have this feature, so you may need to use @State or @Binding variables to trigger updates.

struct ContentView: View {
  @State var text: String = "Loading..."
  @State var category: String = "Swift"  // the id for the task

  // Async function
  func asyncGetText(category: String) async -> String {
    // Simulate some network request
    await Task.sleep(3_000_000_000)
    return "Hello, \(category)!"
  }

  var body: some View {
    VStack {
      Text(text)
        .padding()
        // Start a task with an id when the view is shown
        .task(id: category) {
          // Await the result of the async function
          let result = await asyncGetText(category: category)
          // Update the state with the result
          text = result
        }
      // A picker to change the category
      Picker("Select a category", selection: $category) {
        Text("Swift").tag("Swift")
        Text("iOS").tag("iOS")
        Text("macOS").tag("macOS")
      }
      .pickerStyle(.segmented)
    }
  }
}

Modifier .task() can also take a priority parameter that allows you to specify the priority of the task relative to other tasks. For example, you can use this to prioritize user-initiated tasks over background tasks. .onAppear() does not have this feature, so you may need to use Task, DispatchQueue or OperationQueue to manage priorities.

struct ContentView: View {
  @State var text: String = "Loading..."
  @State var priority: TaskPriority = .userInitiated  // the priority for the task

  // Async function
  func asyncGetText(priority: TaskPriority) async -> String {
    // Simulate some network request
    await Task.sleep(3_000_000_000)
    return "Hello, \(priority)!"
  }

  var body: some View {
    VStack {
      Text(text)
        .padding()
        // Start a task with a priority when the view is shown
        .task(priority: priority) {
          // Await the result of the async function
          let result = await asyncGetText(priority: priority)
          // Update the state with the result
          text = result
        }
      // A picker to change the priority
      Picker("Select a priority", selection: $priority) {
        Text("User Initiated").tag(TaskPriority.userInitiated)
        Text("High").tag(TaskPriority.high)
        Text("Medium").tag(TaskPriority.medium)
        Text("Low").tag(TaskPriority.low)
        Text("Background").tag(TaskPriority.background)
      }
      .pickerStyle(.segmented)
    }
  }
}

share twitter send feedback