How can I run an action when a state changes?

Question

enum SectionType: String, CaseIterable {
    case top = "Top"
    case best = "Best"
}

struct ContentView : View {
    @State private var selection: Int = 0

    var body: some View {
        SegmentedControl(selection: $selection) {
            ForEach(SectionType.allCases.identified(by: \.self)) { type in
                Text(type.rawValue).tag(type)
            }
        }
    }
}

How do I run code (e.g print("Selection changed to \(selection)") when the $selection state changes? I looked through the docs and I couldn't find anything.

Sorry for my answer before, it was incorrect. I have deleted it for now but I am looking into this and will answer as soon as I find out :D — Fogmeister, Jun 11 '19 at 21:52
I haven't worked with this enough to say for sure - and will happily delete this comment if way off - but I tried executing a `func` with a `print` in it, even set a breakpoint, and no luck. Yet, when I put SwiftUI code (like creating a `Text("got here")` it worked. Keeping in mid it's **all** beta 1, I'm thinking this will be corrected (or at least better documented) in a later beta. — , Jun 11 '19 at 22:25
@Fogmeister I want to run a function which fetches stories from the Hacker News API — , Jun 11 '19 at 22:38
You might want to try using `@Published` decorator and subscribe to it. — Daniele Bernardini, Jun 12 '19 at 00:09
@DanieleBernardini I haven’t heard of that, is there a docs link that can tell me more? — , Jun 12 '19 at 00:11
Its the combine framework, check the videos from WWDC on Combine — Daniele Bernardini, Jun 12 '19 at 00:13

George · Answer 1 · 2020-09-27T14:26:06.240

iOS 14.0+

You can use the onChange(of:perform:) modifier, like so:

struct ContentView: View {
    
    @State private var isLightOn = false

    var body: some View {
        Toggle("Light", isOn: $isLightOn)
            .onChange(of: isLightOn) { value in
                if value {
                    print("Light is now on!")
                } else {
                    print("Light is now off.")
                }
            }
    }
}

iOS 13.0+

The following as an extension of Binding, so you can execute a closure whenever the value changes.

extension Binding {
    
    /// When the `Binding`'s `wrappedValue` changes, the given closure is executed.
    /// - Parameter closure: Chunk of code to execute whenever the value changes.
    /// - Returns: New `Binding`.
    func onUpdate(_ closure: @escaping () -> Void) -> Binding<Value> {
        Binding(get: {
            wrappedValue
        }, set: { newValue in
            wrappedValue = newValue
            closure()
        })
    }
}

Used like so for example:

struct ContentView: View {
    
    @State private var isLightOn = false
    
    var body: some View {
        Toggle("Light", isOn: $isLightOn.onUpdate(printInfo))
    }
    
    private func printInfo() {
        if isLightOn {
            print("Light is now on!")
        } else {
            print("Light is now off.")
        }
    }
}

^{This example doesn't need to use a separate function. You only need a closure.}

If you use $isLightOn.animation() for the toggle binding then your side effects in onChange aren't animated as they normally would so I don't think this is the right approach. — malhal, Apr 06 '21 at 17:16

score 52 · Accepted Answer · 2019-08-13T14:28:45.623

You can't use didSet observer on @State but you can on an ObservableObject property.

import SwiftUI
import Combine

final class SelectionStore: ObservableObject {
    var selection: SectionType = .top {
        didSet {
            print("Selection changed to \(selection)")
        }
    }

    // @Published var items = ["Jane Doe", "John Doe", "Bob"]
}

Then use it like this:

import SwiftUI

enum SectionType: String, CaseIterable {
    case top = "Top"
    case best = "Best"
}

struct ContentView : View {
    @ObservedObject var store = SelectionStore()

    var body: some View {
        List {
            Picker("Selection", selection: $store.selection) {
                ForEach(FeedType.allCases, id: \.self) { type in
                    Text(type.rawValue).tag(type)
                }
            }.pickerStyle(SegmentedPickerStyle())

            // ForEach(store.items) { item in
            //     Text(item)
            // }
        }
    }
}

And what if I want to change another `@State` property in the ContentView on `didSet`? With your code I stuck in the instance of the SelectionStore — Lupurus, Mar 31 '20 at 13:43
You can override didSet on a simple struct, no need to use an object. — malhal, Apr 07 '21 at 10:00

score 25 · Answer 3 · answered Jul 03 '20 at 19:40

In iOS 14 there is now a onChange modifier you can use like so:

SegmentedControl(selection: $selection) {
    ForEach(SectionType.allCases.identified(by: \.self)) { type in
        Text(type.rawValue).tag(type)
    }
}
.onChange(of: selection) { value in
    print("Selection changed to \(selection)")
}

pawello2222 · Answer 4 · 2022-09-13T21:06:05.763

24

iOS 13+

You can use onReceive:

import Combine
import SwiftUI

struct ContentView: View {
    @State private var selection = false

    var body: some View {
        Toggle("Selection", isOn: $selection)
            .onReceive(Just(selection)) { selection in
                // print(selection)
            }
    }
}

edited Sep 13 '22 at 21:06

answered Nov 03 '20 at 08:35

pawello2222

46,897
22
145
209

score 23 · Answer 5 · answered Feb 12 '20 at 15:49

23

Here is another option if you have a component that updates a @Binding. Rather than doing this:

Component(selectedValue: self.$item, ...)

you can do this and have a little greater control:

Component(selectedValue: Binding(
    get: { self.item },
    set: { (newValue) in
              self.item = newValue
              // now do whatever you need to do once this has changed
    }), ... )

This way you get the benefits of the binding along with the detection of when the Component has changed the value.

answered Feb 12 '20 at 15:49

P. Ent

1,654
1
12
22

This throws runtime errors: "Modifying state during view update, this will cause undefined behavior." – Wil Gieseler Mar 31 '20 at 19:00
Love this answer. This pattern has saved my butt a few times. – J-Krush Jun 11 '20 at 20:52
To those who want an `extension` of `Binding` for this, see [below](https://stackoverflow.com/a/63289866/9607863). I find it much neater to call. – George Aug 06 '20 at 18:45

score 3 · Answer 6 · answered Nov 12 '20 at 18:23

3

You can use Binding

let textBinding = Binding<String>(
    get: { /* get */ },
    set: { /* set $0 */ }
)

answered Nov 12 '20 at 18:23

YanSte

10,661
3
57
53

Russian · Answer 7 · 2019-06-12T01:23:53.340

Not really answering your question, but here's the right way to set up SegmentedControl (didn't want to post that code as a comment, because it looks ugly). Replace your ForEach version with the following code:

ForEach(0..<SectionType.allCases.count) { index in 
    Text(SectionType.allCases[index].rawValue).tag(index)
}

Tagging views with enumeration cases or even strings makes it behave inadequately – selection doesn't work.

You might also want to add the following after the SegmentedControl declaration to ensure that selection works:

Text("Value: \(SectionType.allCases[self.selection].rawValue)")

Full version of body:

var body: some View {
    VStack {
        SegmentedControl(selection: self.selection) {
            ForEach(0..<SectionType.allCases.count) { index in
                Text(SectionType.allCases[index].rawValue).tag(index)
                }
            }

        Text("Value: \(SectionType.allCases[self.selection].rawValue)")
    }
}

Regarding your question – I tried adding didSet observer to selection, but it crashes Xcode editor and generates "Segmentation fault: 11" error when trying to build.

score 0 · Answer 8 · answered Apr 06 '21 at 17:23

I like to solve this by moving the data into a struct:

struct ContentData {
    var isLightOn = false {
        didSet {
            if isLightOn {
                print("Light is now on!")
            } else {
                print("Light is now off.")
            }
            // you could update another var in this struct based on this value
        }
    }
}

struct ContentView: View {
    
    @State private var data = ContentData()

    var body: some View {
        Toggle("Light", isOn: $data.isLightOn)
    }
}

The advantage this way is if you decide to update another var in the struct based on the new value in didSet, and if you make your binding animated, e.g. isOn: $data.isLightOn.animation() then any Views you update that use the other var will animate their change during the toggle. That doesn't happen if you use onChange.

E.g. here the list sort order change animates:

import SwiftUI

struct ContentData {
    var ascending = true {
        didSet {
            sort()
        }
    }
    
    var colourNames = ["Red", "Green", "Blue", "Orange", "Yellow", "Black"]
    
    init() {
        sort()
    }
    
    mutating func sort(){
        if ascending {
            colourNames.sort()
        }else {
            colourNames.sort(by:>)
        }
    }
}


struct ContentView: View {
    @State var data = ContentData()
    
    var body: some View {
        VStack {
            Toggle("Sort", isOn:$data.ascending.animation())
            List(data.colourNames, id: \.self) { name in
                Text(name)
            }
        }
        .padding()
    }
}

How can I run an action when a state changes?

8 Answers8

iOS 13+

Linked