onAppear – Augmented Code

SwiftUI has view modifiers like onAppear() and onDisappear() for letting the view know when it is going to be displayed and when it is removed from the screen. In addition, there is a task() view modifier for running async functions. Something to keep in mind with onAppear() and task() is that the closure passed into the view modifier can be called multiple times when the view hierarchy changes. For example, when we have a TabView then the view receives onAppear() callback and also the task part of the task() is triggered each time when the tab presenting it is activated. In this blog post, we are looking into a case where we have some code which we only want to run once during the view’s lifetime. One of the use-cases is preparing content in view models. Let’s take a look at these cases where one view and its view model has synchronous prepare function and the other one has async prepare function (e.g. starting a network requests in the prepare function).

	extension ContentView {
	@MainActor final class ViewModel: ObservableObject {
	func prepare() {
	//
	}
	}
	}

	extension OtherView {
	@MainActor final class ViewModel: ObservableObject {
	func prepare() async {
	//
	}
	}
	}

view raw ViewModel.swift hosted with ❤ by GitHub

SwiftUI uses view modifiers for configuring views. This is what we want to do here as well. We can create a new view modifier by conforming to the ViewModifier protocol and implementing the body function, where we add additional functionality to the existing view. The view modifier uses internal state for tracking if the closure was called already or not in the onAppear(). SwiftUI ensures that onAppear is called before the view is rendered. Below is the view modifier’s implementation with a view extension which creates it and finally an example view and its view model using it.

	struct PrepareViewData: ViewModifier {
	@State var hasPrepared = false

	let action: (() -> Void)

	func body(content: Content) -> some View {
	content
	.onAppear {
	if !hasPrepared {
	action()
	hasPrepared = true
	}
	}
	}
	}

	extension View {
	func prepare(perform action: @escaping () -> Void) -> some View {
	modifier(PrepareViewData(action: action))
	}
	}

	struct ContentView: View {
	@StateObject var viewModel = ViewModel()

	var body: some View {
	VStack {
	// redacted
	}
	.prepare {
	viewModel.prepare()
	}
	}
	}

view raw PrepareViewData.swift hosted with ❤ by GitHub

If we have a view model which needs to do async calls in the prepare() function then we need a slightly different view modifier. Since async functions can run a long time, then we should also handle cancellation. If the view disappears, we should cancel the task if it is still running and restart it next time when the view is shown. Cancellation is implemented by keeping a reference to the task and calling cancel() on the task in the onDisappear(). For making the cancellation working properly, we need to make sure the async function actually implements cancellation by using, for example, Task.checkCancellation() within its implementation. Other than that, the view modifier implementation looks quite similar to the one above.

	struct PrepareAsyncViewData: ViewModifier {
	@State var hasPrepared = false
	@State var task: Task<Void, Never>?

	let action: (() async -> Void)

	func body(content: Content) -> some View {
	content
	.onAppear {
	guard !hasPrepared else { return }
	guard task == nil else { return }
	task = Task {
	await action()
	hasPrepared = true
	}
	}
	.onDisappear {
	task?.cancel()
	task = nil
	}
	}
	}

	extension View {
	func prepare(perform action: @escaping () async -> Void) -> some View {
	modifier(PrepareAsyncViewData(action: action))
	}
	}

	struct OtherView: View {
	@StateObject var viewModel = ViewModel()

	var body: some View {
	VStack {
	// redacted
	}
	.prepare {
	await viewModel.prepare()
	}
	}
	}