ViewStore and WithViewStore initializers

[konrain]

Hey guys, I'm trying to figure out the difference between these two

...
var body: some View {
  Button {
    ViewStore(store).send(.change)
  } label: {
    Text("Change")
  }
}
...

VS

var body: some View {
  WithViewStore(store) { viewStore in
    Button {
      viewStore.send(.change)
    } label: {
      Text("Change")
    }
  }
}

Often times I find myself only needing to send a single action in a view so i'm keen to use the first, whats the difference?

[tgrapperon]

There is no issue using the first approach if your view doesn't depend on the state, and actions are triggered relatively infrequently (like button pushes for example).
WithViewStore installs the ViewStore as an @ObservableObject, and its enclosed views are observing the ViewStore's state changes, so I wouldn't use an ad hoc ViewStore instance to pull-out state's values to configure a View, and it will probably not work as you expect in this case.
If you need the ViewStore only to send infrequently an action or two, then you can instantiate it for this purpose, but I think it's the only configuration where it's acceptable. Otherwise, I would recommend to use WithViewStore or to store an instance yourself as an @observableobject in the view. You will loose less time doing so than refactoring your code when your button label will depend on the state.

[konrain]

What could occur if you use ViewStore to send frequent actions, is there a performance hit?

[tgrapperon]

Yes, but it should be OK with most UI stuff which are around 60Hz (or 120Hz) at max. By relatively infrequently, I meant in the 10Hz and below range. Button presses are perfectly OK.
I can't think about something emitting above this rate on the UI side without having to access the state anyway, so the "infrequent" mention was probably irrelevant.
If your view's content is constant, you can safely go with the first option if you like, but if you have two buttons or more, you will start to write more code than using WithViewStore from the beginning.

[stephencelis]

One thing to note is that if you're not observing any state, be sure to invoke store.stateless so that the view doesn't refresh unnecessarily:

 var body: some View {
-  WithViewStore(store) { viewStore in
+  WithViewStore(store.stateless) { viewStore in
     Button {
       viewStore.send(.change)
     } label: {
       Text("Change")
     }
   }
 }