Why is one View updating and one not, as a variable changes?

I have this short Code for my swiftUI project:

ContentView:

import SwiftUI

struct ContentView: View {

    @State var timer: Timer?
    @State var timeGone = 0
    
    func startTimer(){
        
        timer = Timer.scheduledTimer(withTimeInterval: 1, repeats: true, block: {_ in
            
            timeGone += 1
            
        })
        
    }
    
    var MenuBar: some View {
        VStack{
            Text(String(timeGone))
                .font(.system(size: 12))
                .foregroundColor(.white)
                .padding(.vertical, 1)
                .padding(.horizontal, 4)
                .overlay(
                    RoundedRectangle(cornerRadius: 5.0)
                        .stroke(Color.white, lineWidth: 1.2)
                ).onAppear {

                }
        }
        .padding(.vertical, 2)
        .padding(.horizontal, 2)
        .background(Color.clear)
        .id("MenuBar")
    }
    
    var body: some View {
        VStack {
            VStack{
                Text(String(timeGone))
                    .fontWeight(/*@START_MENU_TOKEN@*/.semibold/*@END_MENU_TOKEN@*/)
                    .font(.system(size: 90))
                    
            }
            
            Spacer()
                .frame(height: 30)
            HStack{
                Button("Start") {
                    startTimer()
                }
                .buttonStyle(StartButtonStyle())
            }
        }
        .fixedSize()
        .frame(width: 340.0, height: 200.0)
        .padding(.all, 50.0)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

AppDelegate:

import SwiftUI
import Cocoa


class AppDelegate: NSObject, NSApplicationDelegate {
    

    var statusItem: NSStatusItem!
    
    
    private lazy var contentView: NSView? = {
        let view = (statusItem.value(forKey: "window") as? NSWindow)?.contentView
        return view
    }()
    


    func applicationDidFinishLaunching(_ notification: Notification) {
        setupMenuBar()
        
    }
    
 
    func setupMenuBar(){
        
        statusItem = NSStatusBar.system.statusItem(withLength: 45)
    
        guard let contentView = self.contentView,
              let menuButton = statusItem.button
        else {return}
        
        let hostingView = NSHostingView(rootView: ContentView().MenuBar)
        hostingView.translatesAutoresizingMaskIntoConstraints = false
        contentView.addSubview(hostingView)
        
        NSLayoutConstraint.activate([
            hostingView.topAnchor.constraint(equalTo: contentView.topAnchor),
            hostingView.rightAnchor.constraint(equalTo: contentView.rightAnchor),
            hostingView.leftAnchor.constraint(equalTo: contentView.leftAnchor),
            hostingView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
        ])
    }

}

As you can see in the ContentView file, I have the Body view, which is a window with a button on it and a text label containing a variable, which increments every second after the button is pressed. I also have the MenuBar view, which is just a text label with the same variable in it as the previous one. This MenuBar view displays the textLabel on the Menu Bar of MacOS rather than on a window.

What I can't understand is why the second text label updates as the variable changes but the first one doesn't.

I've not really tried much in particular as I'm not even sure how to approach this. It'd just make sense in my head that both labels update accordingly.

Thanks in advance for any Answers!

You have an instance of your ContentView that is created for the window. It has storage for a timer and timerGone variable.

When you create your menu bar view with:

let hostingView = NSHostingView(rootView: ContentView().MenuBar)

you are creating a completely new content view (through ContentView()) that has its very own storage for a different timer and a different timerGone. Those variables have no relationship to the ones created for the window(apart from the fact that the were both built from the same template).

Or to put it another way, you have two complete ContentView instances and their types are the only thing they share in common.

To fix the problem you would need to pull the model (in this case the timerGone variable) into a separate object that is shared by the two views that display the value.

Here is a playground with an example:

import SwiftUI
import Cocoa
import Combine
import PlaygroundSupport


// Model class that holds the current tick count
class TimerModel: ObservableObject {
    @Published var tickCount: Int = 0

    init() {
    }
}

struct TickCountView : View {
    @ObservedObject var timerModel: TimerModel

    var body: some View {
        VStack{
            Text(String(timerModel.tickCount))
                .font(.system(size: 12))
                .foregroundColor(.white)
                .padding(.vertical, 1)
                .padding(.horizontal, 4)
                .overlay(
                    RoundedRectangle(cornerRadius: 5.0)
                        .stroke(Color.white, lineWidth: 1.2)
                )
        }
        .padding(.vertical, 2)
        .padding(.horizontal, 2)
        .background(Color.clear)
    }
}

struct TimerControlView : View {
    @ObservedObject var timerModel: TimerModel
    @State var timer = Timer.TimerPublisher(interval: 1.0, runLoop: RunLoop.main, mode: .common)
    @State var cancelTimer: Cancellable?

    var body: some View {
        VStack {
            VStack{
                Text(String(describing: timerModel.tickCount))
                    .fontWeight(/*@START_MENU_TOKEN@*/.semibold/*@END_MENU_TOKEN@*/)
                    .font(.system(size: 90))

            }

            Spacer()
                .frame(height: 30)
            HStack{
                Button("Start") {
                    cancelTimer = timer.connect()
                }
            }
        }
        .fixedSize()
        .frame(width: 340.0, height: 200.0)
        .padding(.all, 50.0)
        .onReceive(timer) { _ in
            timerModel.tickCount += 1
        }
    }
}

struct DemonstrationView: View {
    @StateObject var timerModel = TimerModel()

    var body: some View {
        HStack {
            TickCountView(timerModel:  timerModel)
            TimerControlView(timerModel: timerModel)
        }
        .frame(width: 640.0, height: 480.0)
    }
}

PlaygroundSupport.PlaygroundPage.current.liveView = NSHostingController(rootView: DemonstrationView())

In the code the "model", the bit of information that is shared by different views, is stored in an instance of the TimerModel class. This class is an ObservableObject so whenever the tick changes, it can notify listeners.

TickCountView is a view that can display the tickCount in a TimerModel. It gets its value from the TimerModel instance you pass it when it's created.

TimerControlView is a view that refers to a TimerModel instance and allows you to control it. It makes use of TickCountView and points it at its timerModel, and also adds a button that lets you start the timer. When the timer fires, it tells the model object to update the tick count.

The DemonstrationView creates a single TimerModel instance that will be shared by its multiple subviews. This instance is the "single source of truth" for the current tick count. The DemonstrationView creates two views that both refer back to this single source of truth. That way, when you push the button, and the control view starts making changes to the TimerModel instance, both views are told about the change and can update what they display.

The important point, for SwiftUI, is that you have a single place where shared information is kept - the single source of truth, and any view that wants to know about that information references that truth. SwiftUI provides tools like Bindings or ObservableObjects (or @Observable in the newest SDKs) to help you set up those references.