Why does SwiftUI re-render all ForEach items in view

Why does SwiftUI re-render all ForEach items in view?

In your original code, CardView has a dependency on isSelected, which is a @Binding , so basically a state (in the sense that it will trigger an update if the value changes).

Every button tap updates the isSelected binding. Since all CardView reference the same binding, when that binding's value changes, all views holding that binding update.

With this approach, the only solution is the conformance to Equatable, just like in your updated code, which tells SwiftUI: "Two GameCardView instances are equal if their title AND isSelected values are the same."

The alternative: Class-based approach with @Observable

If you want to avoid conforming to Equatable, the only way I can think of is by using @Observable class models for items/titles (or Swiftdata @Model classes if you need persistence, which are also @Observable).

So if instead of a simple string, you could have a GameCard model:

@Observable
class GameCard: Identifiable {
    let id = UUID()
    let title: String
    var isSelected: Bool = false

    init(title: String) {
        self.title = title
    }
}

Then your Game class would have a var cards: [GameCard] property, with a toggleSelection() function:

@Observable
class Game {
    var cards: [GameCard]

    init(titles: [String]) {
        self.cards = titles.map { GameCard(title: $0) }
    }

    func toggleSelection(for card: GameCard) {
        if card.isSelected {
            // Deselect the item
            card.isSelected = false
        } else {
            // Deselect any currently selected item
            cards.first(where: { $0.isSelected })?.isSelected = false
            // Select this item
            card.isSelected = true
        }
    }
}

Your call to GameCardView would become:

 GameCardView(card: card, game: game)

And the GameCardView:

struct GameCardView: View {
    var card: GameCard
    var game: Game

    var body: some View {
        let _ = print("update view \(card.title)")
        Button {
            withAnimation(.easeInOut(duration: 0.2)) {
                game.toggleSelection(for: card)
            }
        } label: {
            Text(card.title)
                .font(.headline)
                .frame(maxWidth: .infinity)
                .foregroundStyle(card.isSelected ? .green : .orange)
        }
    }
}

This would work, because:

• Each GameCard is independently observable and mutation happens inside the card object (rather than on the parent when you have centralized selection state)

• When card.isSelected changes, only views reading that specific card's isSelected property update

• Only 2 views print (the one being selected and the one being deselected)

From a memory footprint standpoint, the string array + Equatable approach is far lighter, but as far as update performance, both methods would probably be pretty equal. However, from a scalability standpoint, the class approach is certainly preferred.

Which you use is up to you.

Here's the complete working code:

import SwiftUI

// Class-based approach with @Observable
@Observable
class GameCard: Identifiable {
    let id = UUID()
    let title: String
    var isSelected: Bool = false

    init(title: String) {
        self.title = title
    }
}

@Observable
class Game {
    var cards: [GameCard]

    init(titles: [String]) {
        self.cards = titles.map { GameCard(title: $0) }
    }

    func toggleSelection(for card: GameCard) {
        if card.isSelected {
            // Deselect the item
            card.isSelected = false
        } else {
            // Deselect any currently selected item
            cards.first(where: { $0.isSelected })?.isSelected = false
            // Select this item
            card.isSelected = true
        }
    }
}

struct GameObservableView: View {
    @State private var game = Game(titles: [
        "jxrfkzqp", "duwlemci", "hbpokxra", "tcyqdsne", "lvgurxzt"
    ])

    var body: some View {
        VStack(spacing: 12) {
            ForEach(game.cards) { card in
                GameCardView(card: card, game: game)
            }
        }
        .padding()
    }
}

struct GameCardView: View {
    var card: GameCard
    var game: Game

    var body: some View {
        let _ = print("update view \(card.title)")
        Button {
            withAnimation(.easeInOut(duration: 0.2)) {
                game.toggleSelection(for: card)
            }
        } label: {
            Text(card.title)
                .font(.headline)
                .frame(maxWidth: .infinity)
                .foregroundStyle(card.isSelected ? .green : .orange)
        }
    }
}

#Preview {
    GameObservableView()
}