Why would the view update be weird?

[wogus3602]

In the example using recursion I made it recursive to represent the view as a tree.

If you attach the id modifier to the List, it updates properly because it updates everything. But I want to update by comparing only one by one. Is there a way to make it draw properly without using the id?

video.mov

Below is the code used.

// ItemView

import SwiftUI
import ComposableArchitecture

struct ItemView: View {
    let store: Store<Item, ItemAction>
    
    var body: some View {
        ForEachStore(
            store.scope(
                state: \.children,
                action: ItemAction.node(id:action:)
            )
        ) { childStore in
            WithViewStore(childStore) { viewStore in
                if viewStore.children.isEmpty {
                    Text("\(viewStore.title)")
                        .contextMenu {
                            Button("delete") {
                                viewStore.send(.delete)
                            }
                        }
                } else {
                    DisclosureGroup(
                        isExpanded: viewStore.binding(
                            get: \.isExpanded,
                            send: ItemAction.disclosureTapped
                        ),
                        content: {
                            ItemView(store: childStore)
                        },
                        label: {
                            Text("\(viewStore.title)")
                                .contextMenu {
                                    Button("delete") {
                                        viewStore.send(.delete)
                                    }
                                }
                        }
                    )
                }
            }
        }
    }
}

// ItemEnvironment
struct ItemEnvironment {}

// ItemAction
import SwiftUI

// MARK: - Action
indirect enum ItemAction {
    case node(id: Item.ID, action: ItemAction)
    case disclosureTapped(Bool)
    case delete
}

// ItemState
import ComposableArchitecture

struct Item: Identifiable, Equatable {
    var id: UUID = UUID()

    var isExpanded: Bool
    var title: String = "title"
    var children: IdentifiedArrayOf<Item> = []

    init(title: String,
         children: IdentifiedArrayOf<Item>) {
        self.title = title
        self.children = children
        self.isExpanded = true
    }
}

// ItemReducer
import ComposableArchitecture

typealias ItemReducer = Reducer<Item, ItemAction, ItemEnvironment>

let itemReducer = ItemReducer.recurse { `self` in
    .init { state, action, environment in
        switch action {
        case .node:
            if case let .node(id, action: .delete) = action {
                state.children.remove(id: id)
                return .none
            }
            
            return self.forEach(
                state: \.children,
                action: /ItemAction.node(id:action:),
                environment: { $0 }
            )
            .run(&state, action, environment)
            
        case let .disclosureTapped(isExpanded):
            state.isExpanded = isExpanded
            return .none
            
        case .delete:
            return .none
        }
    }
}


// https://github.com/pointfreeco/swift-composable-architecture/blob/main/Examples/CaseStudies/SwiftUICaseStudies/04-HigherOrderReducers-Recursion.swift
extension Reducer {
    static func recurse(_ reducer: @escaping (Reducer) -> Reducer) -> Reducer {
        var `self`: Reducer!
        self = Reducer { state, action, environment in
            reducer(self).run(&state, action, environment)
        }
        return self
    }
}

// contentView

import SwiftUI

struct ContentView: View {
    
    var body: some View {
        List {
            ItemView(store:
                        .init(initialState: dummyItems2,
                              reducer: itemReducer,
                              environment: ItemEnvironment()))
        }
        .listStyle(SidebarListStyle())
    }
}

let dummyItems2 = Item(title: "root",
                             children: [
                                Item(title: "1",
                                     children: [
                                        Item(title: "1-1",
                                             children: [
                                                Item(title: "1-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "1-2",
                                             children: [
                                                Item(title: "1-2-1",
                                                     children: []),
                                                Item(title: "1-2-2",
                                                     children: [])]
                                        )
                                     ]),
                                Item(title: "2",
                                     children: [
                                        Item(title: "2-1",
                                             children: [
                                                Item(title: "2-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "2-2",
                                             children: [
                                                Item(title: "2-2-1",
                                                     children: [])]
                                        ),
                                        Item(title: "2-3",
                                             children: [
                                                Item(title: "2-3-1",
                                                     children: [])]
                                        ),
                                     ]),
                                Item(title: "3",
                                     children: [
                                        Item(title: "3-1",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: []),
                                                Item(title: "3-1-2",
                                                     children: []),
                                                Item(title: "3-1-3",
                                                     children: [])]
                                        ),
                                        Item(title: "3-2",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "3-3",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: [])]
                                        )
                                     ])
                                
                             ])



let dummyItems = Item(title: "root",
                            children: [
                                Item(title: "1",
                                     children: [
                                        Item(title: "1-1",
                                             children: [
                                                Item(title: "1-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "1-2",
                                             children: [
                                                Item(title: "1-2-1",
                                                     children: []),
                                                Item(title: "1-2-2",
                                                     children: [])]
                                        )
                                     ]),
                                Item(title: "2",
                                     children: [
                                        Item(title: "2-1",
                                             children: [
                                                Item(title: "2-1-1",
                                                     children: [])]
                                        ),
                                     ]),
                                Item(title: "3",
                                     children: [
                                        Item(title: "3-1",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: []),
                                                Item(title: "3-1-2",
                                                     children: []),
                                                Item(title: "3-1-3",
                                                     children: [])]
                                        ),
                                        Item(title: "3-2",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "3-3",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: [])]
                                        )
                                     ])
                                
                            ])

[mbrandonw]

I don't have a fix, but I can definitely reproduce this, and it's very strange. My gut tells me it's a bug in SwiftUI. I'd be curious if you can reproduce this in vanilla SwiftUI using @ObservableObject/@StateObject.

[wogus3602]

It will take some time, but I'll reproduce it once.

[mbrandonw]

We investigated quite a bit this morning and came to the conclusion that it is most likely a bug in our ForEachStore. We will look into it more in the coming days. Thanks for the report!

[wogus3602]

@mbrandonw
I've implemented the same action without using TCA, and the same issue occurs.

import SwiftUI

struct ContentView: View {
    @ObservedObject var items: Item
    
    init(item: Item) {
        self.items = item
    }
    
    var body: some View {
        List {
            ForEachView(items: items)
        }
    }
}

struct ForEachView: View {
    @StateObject var items: Item
    
    var body: some View {
        ForEach(items.children) { item in
            LabelView(parent: items, item: item)
        }
    }
}

struct LabelView: View {
    @ObservedObject var parent: Item
    @ObservedObject var item: Item
    
    var body: some View {
        Group {
            if item.children.isEmpty {
                Text("\(item.title)")
                    .contextMenu {
                        Button("delete") {
                            if let index = parent.children.firstIndex(where: { $0.id == item.id }) {
                                parent.remove(at: index)
                            }
                        }
                    }
            } else {
                DisclosureGroup(
                    isExpanded: item.$isExpanded,
                    content: {
                        ForEachView(items: item)
                    },
                    label: {
                        Text("\(item.title)")
                            .contextMenu {
                                Button("delete") {
                                    if let index = parent.children.firstIndex(where: { $0.id == item.id }) {
                                        parent.remove(at: index)
                                    }
                                }
                            }
                    }
                )
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    
    static var previews: some View {
        let item: Item = dummyItems2
        ContentView(item: item)
    }
}

class Item: Identifiable, ObservableObject {
    var id: UUID = UUID()
    
    @Binding var isExpanded: Bool
    @Published var title: String = "title"
    @Published var children: [Item] = []
    
    init(title: String,
         children: [Item]) {
        self.title = title
        self.children = children
        self._isExpanded = .constant(true)
    }
    
    func remove(at index: Int) {
        children.remove(at: index)
    }
}

let dummyItems2 = Item(title: "root",
                             children: [
                                Item(title: "1",
                                     children: [
                                        Item(title: "1-1",
                                             children: [
                                                Item(title: "1-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "1-2",
                                             children: [
                                                Item(title: "1-2-1",
                                                     children: []),
                                                Item(title: "1-2-2",
                                                     children: [])]
                                        )
                                     ]),
                                Item(title: "2",
                                     children: [
                                        Item(title: "2-1",
                                             children: [
                                                Item(title: "2-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "2-2",
                                             children: [
                                                Item(title: "2-2-1",
                                                     children: [])]
                                        ),
                                        Item(title: "2-3",
                                             children: [
                                                Item(title: "2-3-1",
                                                     children: [])]
                                        ),
                                     ]),
                                Item(title: "3",
                                     children: [
                                        Item(title: "3-1",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: []),
                                                Item(title: "3-1-2",
                                                     children: []),
                                                Item(title: "3-1-3",
                                                     children: [])]
                                        ),
                                        Item(title: "3-2",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: [])]
                                        ),
                                        Item(title: "3-3",
                                             children: [
                                                Item(title: "3-1-1",
                                                     children: [])]
                                        )
                                     ])
                                
                             ])

[iampatbrown]

This looks more like an issue with nested ObservableObjects. Seems like there's multiple sources of the truth and the changes are not being coordinated through the list.
The use of @StateObject isn't ideal as well. This should be used when the view is responsible for creating the item.
I can have a better look at this a bit later today. That's just my assumption looking at the Vanilla implementation.

[iampatbrown]

Looks like its more of a List issue. Check out Lists - Creating Hierarchical Lists towards the end of the page.

With a few changes you end up with something like this

struct ContentView: View {
  @StateObject var items: Item

  init(item: Item = dummyItems2) {
    self._items = StateObject(wrappedValue: item)
  }

  var body: some View {
    List(items.children ?? [], children: \.children) { child in
      Text("\(child.title)")
        .contextMenu {
          Button("delete") { items.remove(id: child.id) }
        }
    }
  }
}

class Item: Identifiable, ObservableObject {
  var id = UUID()

  @Published var isExpanded: Bool = true
  @Published var title: String = "title"
  @Published var children: [Item]? = nil

  init(title: String,
       children: [Item]? = nil)
  {
    self.title = title
    self.children = children
  }

  func remove(id: Item.ID) {
    self.children = children?.filter { $0.id != id }
    self.children?.forEach { $0.remove(id: id) }
  }
}

Alternatively, you could force the whole list to update by doing this List { ... }.id(UUID())... but I wouldn't recommend that.

This still could be a bug that is being fixed as well. It just looks like the way it works for macOS at the moment.

[iampatbrown]

There would also be a more complex way of getting it to update the list correctly.... but I chose not to go down that road. Check out the Apple guide first and let me know if it's something that would work for you.

[wogus3602]

@iampatbrown
I need to be able to control the expansion and collapse of the list. But List doesn't provide that feature. Only DisclosureGroup is provided.