How can I be sure that a View did completely rendered until last line of code in SwiftUI?

Question

I have some code that they must get fired after the View get completely rendered and drawn, as we know we got onAppear or onChange for a View, they can be useful to know wether the View has been appear or is under change, but they are not useful to be sure that the View has been 100% rendered, for example if we got ForEach, List or Form in the View, you could see the View but because of hierarchy could still ForEach working on View, so that means the View did not completely loaded, it could be get more noticeable if you gave an animation modifier then you could see it as well, So my goal is know how I can be 100% sure my View get rendered with everything inside and it would be no more line code to run for rendering the View?

thanks for reading and helping

---

Example:

import SwiftUI


struct ContentView: View {

    var body: some View {

        HierarchyView()
            .onAppear() { print("HierarchyView"); print("- - - - - - - - - - -") }

    }

}



struct HierarchyView: View {

    var body: some View {

        ZStack {

            Color
                .blue
                .ignoresSafeArea()
                .onAppear() { print("blue"); print("- - - - - - - - - - -")  }

            VStack {
                
                Text("Top text")
                    .onAppear() { print("Top Text") }
                
                Spacer()
                    .onAppear() { print("Top Spacer") }
                
            }
            .onAppear() { print("Top VStack"); print("- - - - - - - - - - -")  }

            VStack {

                VStack {

                    VStack {

                        ForEach(0..<3, id:\..self) { index in
                            
                            Text(index.description)
                                .onAppear() { print(index.description); if (index == 0) { print("Last of second ForEach!!!") } }
                            
                        }
  
                    }
                    .onAppear() { print("Middle VStack Inside DEEP"); print("- - - - - - - - - - -")  }

                }
                .onAppear() { print("Middle VStack Inside"); print("- - - - - - - - - - -")  }

            }
            .onAppear() { print("Middle VStack Outside"); print("- - - - - - - - - - -")  }
            
            
            
            VStack {
                
                Spacer()
                    .onAppear() { print("Bottom Spacer") }
                
                
                ForEach(0..<3, id:\..self) { index in
                    
                    Text(index.description)
                        .onAppear() { print(index.description); if (index == 0) { print("Last of first ForEach!!!") } }
                    
                }

                
                
                
                Text("Bottom text")
                    .onAppear() { print("Bottom Text") }
                
            }
            .onAppear() { print("Bottom VStack"); print("- - - - - - - - - - -")  }
            
            
        }
        .onAppear() { print("ZStack of HierarchyView"); print("- - - - - - - - - - -") }
        
        
    }
 
}

Answer 1

There's no general way, AFAIK, to tell when all possible descendant views have "appeared" (i.e. would have fired their onAppear).

Depending on how you think about it, "appeared" is different than "rendered". Generally speaking, each view decides when it renders its children. For example, LazyVStack will only create its elements when they need to be rendered. A custom view conforming to UIViewControllerRepresentable could decide to do whatever it wants.

With that in mind (assuming render == appear), an approach you could take is to "track" those views that you care about having "appeared", and fire a callback when they all did.

You could create a view modifier to keep track of each view "render" status, and use PreferenceKey to collect all this data:

struct RenderedPreferenceKey: PreferenceKey {
    static var defaultValue: Int = 0
    static func reduce(value: inout Int, nextValue: () -> Int) {
        value = value + nextValue() // sum all those remain to-be-rendered
    }
}

struct MarkRender: ViewModifier {
    @State private var toBeRendered = 1
    func body(content: Content) -> some View {
        content
            .preference(key: RenderedPreferenceKey.self, value: toBeRendered)
            .onAppear { toBeRendered = 0 }
    }
}

Then, create convenience methods on View to simplify its usage:

extension View {
    func trackRendering() -> some View {
        self.modifier(MarkRender())
    }

    func onRendered(_ perform: @escaping () -> Void) -> some View {
        self.onPreferenceChange(RenderedPreferenceKey.self) { toBeRendered in
           // invoke the callback only when all tracked have been set to 0,
           // which happens when all of their .onAppear are called
           if toBeRendered == 0 { perform() }
        }
    }
}

Usage would be:

VStack {
    ForEach(0..<3, id:\..self) { index in
        Text("\(index)").trackRendering()
    }
}
.onRendered {
    print("Rendered")
}

Answer 2

It may not relate entirely to OP's question, but I'm leaving this here in case it helps someone else. I was facing an issue where onAppear() would get called without the view actually rendering. The view not rendering was the correct and desired behavior, but the fact that onAppear() got triggered was not.

I found out this post while investigating my own issue since I was looking for a way to perform an action after my view first rendered. I emphasize the after because that's where the problem lied for me. You see, Apple's documentation states that onAppear() adds an action to perform before this view appears. But in my case, it did trigger before the apparition of the view, except that the view never actually appeared after it triggered, which again was the expected behavior in my case.

My solution turned out to be inspired by New Dev's accepted answer but without the use of a PreferenceKey. I tried to keep it as simple as possible, and the result works great for me:

extension View {
    /// Adds an action to perform after this view appears for the first time.
    /// 
    /// - Parameter action: The action to perform.
    /// - Returns: A view that triggers `action` after it appears.
    func afterFirstRender(perform action: @escaping () -> Void) -> some View {
        self.modifier(FirstRenderTracker(action: action))
    }
}

// ViewModifier supporting the `afterFirstRender()` extension
struct FirstRenderTracker: ViewModifier {
    @State private var isRendered = false
    let action: () -> Void
    
    func body(content: Content) -> some View {
        content
            .onAppear {
                isRendered = true
            }
            .onDisappear {
                isRendered = false
            }
            .onChange(of: isRendered) { isRendered in
                if isRendered {
                    action()
                }
            }
    }
}

And it would be used this way:

VStack {
    ...
}
.afterFirstRender {
    print("First render")
}

Using this extension, I no longer have the problem where the code in onAppear() would trigger for no reason when the view wouldn't actually render.

Now I'm still not really sure why this works or why onAppear() was triggered at all in my case, but it does the job for my specific case.