100% CPU Utilization When Navigation to New Page

[nikitaame]

Hey there! I'm trying to debug an issue where I see 100% CPU utilization when opening up a new page that has a list of toggles. I wonder if I am doing something wrong with how I've set things up. The app becomes unresponsive for a noticeably significant amount of time before opening up the page. I've made a sample project that reproduces this issue.

Here's a a snapshot of what is causing the spike in CPU usage:

Screen recording of delay to open page:

RPReplay_Final1717390534.MP4

I had tried removing this line:

id: \.state.id

from the ForEach of the FeatureFlagsView and its "faster" but then there are hitches in the scrolling while showing the rows for the first time.

struct ContentView: View {

    @Perception.Bindable var store: StoreOf<Feature>

    var body: some View {
        WithPerceptionTracking {
            NavigationView {
                List {
                    Section {
                        NavigationLink(
                            item: $store.scope(state: \.destination?.featureFlags, action: \.destination.featureFlags)
                        ) { store in
                            FeatureFlagsView(store: store)
                        } label: {
                            Text("Feature Flags")
                        }
                        .contentShape(Rectangle())
                        .onTapGesture {
                            store.send(.featureFlagsSelected)
                        }
                    }
                }
            }
        }
    }

    @Reducer
    struct Feature {

        @ObservableState
        struct State: Equatable {
            @Presents var destination: Destination.State?
        }

        enum Action: Equatable {
            case destination(PresentationAction<Destination.Action>)
            case featureFlagsSelected
        }

        var body: some ReducerOf<Self> {
            Reduce { state, action in
                switch action {
                case .destination:
                    return .none

                case .featureFlagsSelected:
                    state.destination = .featureFlags(
                        FeatureFlagsView.Feature.State(
                            featureFlags: FeatureFlagToggleViewStateArray(FeatureFlag.mockFeatureFlags)
                        )
                    )
                    return .none
                }
            }
            .ifLet(\.$destination, action: \.destination) {
                Destination()
            }
        }
    }

    @Reducer
    struct Destination {

        enum State: Equatable {
            case featureFlags(FeatureFlagsView.Feature.State)
        }

        enum Action: Equatable {
            case featureFlags(FeatureFlagsView.Feature.Action)
        }

        var body: some Reducer<State, Action> {
            Scope(state: \.featureFlags, action: \.featureFlags) {
                FeatureFlagsView.Feature()
            }
        }
    }
}

struct FeatureFlagsView: View {

    @Perception.Bindable var store: StoreOf<Feature>

    var body: some View {
        WithPerceptionTracking {
            List {
                Section {
                    ForEach(
                        store.scope(
                            state: \.featureFlags,
                            action: \.featureFlags
                        ),
                        id: \.state.id
                    ) {
                        FeatureFlagToggleView(store: $0)
                    }
                }
            }
            .onAppear { store.send(.onAppear) }
            .searchable(
                text: $store.searchText,
                placement: .navigationBarDrawer(displayMode: .always)
            )
        }
    }

    @Reducer
    struct Feature {

        @ObservableState
        struct State: Equatable {
            var featureFlags: FeatureFlagToggleViewStateArray
            var baseFeatureFlags: FeatureFlagToggleViewStateArray = []
            var searchText: String = ""
        }

        enum Action: BindableAction, Equatable {
            case binding(BindingAction<State>)
            case featureFlags(IdentifiedActionOf<FeatureFlagToggleView.Feature>)
            case filterFeatureFlags(String)
            case onAppear
        }

        var body: some ReducerOf<Self> {
            BindingReducer()
                .onChange(of: \.searchText) { oldValue, newValue in
                    Reduce { _, _ in
                            .run { send in
                                guard oldValue != newValue else { return }
                                await send(.filterFeatureFlags(newValue))
                            }
                    }
                }

            Reduce { state, action in
                switch action {
                case .binding:
                    return .none

                case .featureFlags:
                    return .none

                case let .filterFeatureFlags(searchText):
                    state.featureFlags = state.baseFeatureFlags.filter(with: searchText)
                    return .none

                case .onAppear:
                    state.baseFeatureFlags = state.featureFlags
                    return .none
                }
            }
            .forEach(\.featureFlags, action: \.featureFlags) {
                FeatureFlagToggleView.Feature()
            }
            .forEach(\.baseFeatureFlags, action: \.featureFlags) {
                FeatureFlagToggleView.Feature()
            }
        }
    }
}

struct FeatureFlagToggleView: View {

    @Perception.Bindable var store: StoreOf<Feature>

    var body: some View {
        WithPerceptionTracking {
            Toggle(store.name, isOn: $store.isOn)
        }
    }

    @Reducer
    struct Feature {

        @ObservableState
        struct State: Equatable, Identifiable {
            var name: String
            var isOn: Bool

            var id: String {
                name
            }

            init(featureFlag: FeatureFlag) {
                self.name = featureFlag.name
                self.isOn = featureFlag.isOn
            }
        }

        enum Action: BindableAction, Equatable {
            case binding(BindingAction<State>)
        }

        var body: some ReducerOf<Self> {
            BindingReducer()
            Reduce { state, action in
                switch action {
                case .binding(\.isOn):
                    return .none

                case .binding:
                    return .none
                }
            }
        }
    }
}

struct FeatureFlag {
    let name: String
    var isOn: Bool

    static var mockFeatureFlags: [FeatureFlag] = {
        var flags = [FeatureFlag]()
        for _ in 0..<100 {
            let randomName = UUID().uuidString
            let randomIsOn = Bool.random()
            flags.append(FeatureFlag(name: randomName, isOn: randomIsOn))
        }
        return flags
    }()
}

typealias FeatureFlagToggleViewStateArray = IdentifiedArrayOf<FeatureFlagToggleView.Feature.State>

extension IdentifiedArrayOf where ID == String, Element == FeatureFlagToggleView.Feature.State {
    init(_ featureFlags: [FeatureFlag]) {
        self.init(
            uniqueElements: featureFlags.map {
                FeatureFlagToggleView.Feature.State(featureFlag: $0)
            }
        )
    }
}

extension IdentifiedArray where ID == String, Element == FeatureFlagToggleView.Feature.State {
    func filter(
        with searchText: String,
        locale: Locale = .current
    ) -> IdentifiedArray<ID, FeatureFlagToggleView.Feature.State> {
        guard !searchText.isEmpty else { return self }

        return self.filter { featureFlagState in
            let featureFlagName = featureFlagState.name
            let normalizedFeatureFlagText = featureFlagName.folding(
                options: [.caseInsensitive, .diacriticInsensitive],
                locale: locale
            )
            let normalizedSearchText = searchText.folding(
                options: [.caseInsensitive, .diacriticInsensitive],
                locale: locale
            )
            return normalizedFeatureFlagText.contains(normalizedSearchText)
        }
    }
}

extension NavigationLink {
    public init<D, C: View>(
        item: Binding<D?>,
        @ViewBuilder destination: (D) -> C,
        @ViewBuilder label: () -> Label
    ) where Destination == C? {
        self.init(
            destination: item.wrappedValue.map(destination),
            isActive: Binding(
                get: { item.wrappedValue != nil },
                set: { isActive, transaction in
                    if !isActive {
                        item.transaction(transaction).wrappedValue = nil
                    }
                }
            ),
            label: label
        )
    }

    public init<D, C: View, T: Hashable>(
        item: Binding<D?>,
        tag: T,
        @ViewBuilder destination: (D) -> C,
        @ViewBuilder label: () -> Label
    ) where Destination == C? {
        self.init(
            destination: item.wrappedValue.map(destination),
            tag: tag,
            selection: Binding(
                get: { item.wrappedValue != nil ? tag : nil },
                set: { selection, transaction in
                    if selection == nil {
                        item.transaction(transaction).wrappedValue = nil
                    }
                }
            ),
            label: label
        )
    }
}

[mbrandonw]

Hi @nikitaame, thanks for providing some code. That definitely helps us look into what you are seeing.

However, before even running the project myself, I want to mention that in the screenshot you posted there is a mention of isInSwiftUIBody:

And that function is only compiled in DEBUG mode:

https://github.com/pointfreeco/swift-perception/blob/9b77fbd07b9529312f7e9adb10f5131acd9e2363/Sources/Perception/PerceptionRegistrar.swift#L197-L215

It's what provides the purple runtime warnings for when WithPerceptionTracking is not being used properly, and so it is not included at all in release builds.

So, are you sure you are experiencing performance/CPU problems when running the app for release? This may only be an issue for DEBUG builds.

[nikitaame]

Hi @mbrandonw, thanks for taking a look!

You are 100% right, there are no issues when running the app for release. Thank you for figuring that out!

Unfortunately, it takes ~15 seconds to navigate to the page in the real project. It is part of a developer config modal constantly used in debug mode. Hence the mention of "feature flag" in the sample. I introduced TCA in this dev config modal as a showcase of TCA for our team and would love to polish this if possible. Do you have any suggestions or workarounds?

[mbrandonw]

Huh ok, and you are seeing a 15 second slowdown in the demo code you provided? I'm not seeing such a dramatic slowdown. Seems like maybe a second or so.

[nikitaame]

No, only seeing about a couple second slowdown in the demo code. The production code is where we see the ~15 second delay. I think its just more rows of the data? It is a close to a 1 for 1 sample. This is most noticeable on iPhone 8 / iPhone SE models of course.

Here's running the actual app (iPhone 8):

Could there be an option to disable the runtime warnings?

[mbrandonw]

Yes, you can disable the debug checks by setting this global boolean to false:

https://github.com/pointfreeco/swift-perception/blob/main/Sources/Perception/PerceptionChecking.swift#L3

[nikitaame]

Awesome! It works great with that.

If there is anything I can do to help debug this issue or if there are more improvements made to the debug checks I can come back and test those out.

Thank you Brandon!

[mbrandonw]

Hi @nikitaame, I don't imagine we will have much time to mess with the debug checks. It is a battle of diminishing returns. If you want to look into the code and see if there is something to be done, we will happily take a PR.