How to Avoid Non-Related Views from Rendering on State Variable Updates - swiftui

Question

I have created two triangle shapes and I am trying to color each of them individually when I click on it. The #State variable is created inside PaintView which creates a Shape that contains a single path.
The behavior I’m seeing is that whenever I click on a shape, it re-creates both shapes, instead of only the one I’m tapping on (I can observe this based on the print that I've added to BuildShape).
Now, my understanding is that whenever a state changes, SwiftUI will re-render the entire View that contains that #State, and its child views, but since my shapes are in different views that don't relate, why is SwiftUI re-rendering both of them?
This diagram shows how the views related to each other:
For example, this is what happens when I tap on the bottom triangle:
When I tap on the bottom triangle for the first time, SwiftUI re-creates the bottom triangle twice, and the top triangle once
Path: 0 0 m 100 100 l 200 0 l
Path: 100 100 m 0 200 l 200 200 l
Path: 100 100 m 0 200 l 200 200 l
When I tap on the bottom triangle again (and for as many other times), SwiftUI re-creates the bottom triangle once, and the top triangle once
Path: 0 0 m 100 100 l 200 0 l
Path: 100 100 m 0 200 l 200 200 l
This is the code I'm using:
import SwiftUI
import UIKit
struct BuildShape: Shape {
let path: Path
func path(in rect: CGRect) -> Path {
print("Path:", path)
return path
}
}
struct PaintView: View {
let path: Path
#State var color = Color.black
var body: some View {
BuildShape(path: path)
.fill(self.color)
.onTapGesture(count: 1) {
self.color = Color.blue
}
}
}
struct DrawView: View {
var triangle1Path: Path {
var path = Path()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 100))
path.addLine(to: CGPoint(x: 200, y: 0))
return path
}
var triangle2Path: Path {
var path = Path()
path.move(to: CGPoint(x: 100, y: 100))
path.addLine(to: CGPoint(x: 0, y: 200))
path.addLine(to: CGPoint(x: 200, y: 200))
return path
}
var body: some View {
ZStack {
PaintView(path: triangle1Path)
PaintView(path: triangle2Path)
}
}
}

Answer 1

The views containing triangle shapes are overlap (because they are in ZStack), and as views by default are not opaque, changing one can affects resulting appearance so redrawn all in ZStack.
ZStack {
PaintView(path: triangle1Path)
PaintView(path: triangle2Path)
}
Put them for example into VStack and you'll see that only tapped is redrawn, because rendering engine knows now that views independent.
VStack {
PaintView(path: triangle1Path)
PaintView(path: triangle2Path)
}