SwiftUI - @State Property Wrapper Explained

today's video is sponsored by squarespace all right let's explain the at state property wrapper which is a fundamental concept in swift ui but to understand state we have to back up a little bit and talk about the big picture of how swift ui works right there's a fundamental change coming from ui kit and the big thing to know is that in swift ui views are structs whereas in ui kit they were classes like reference types you know for example you know ui view was a parent class of ui button right ui button subclassed it so ui button inherited all the ui view stuff it made it like pretty heavy well in swift ui everything is a lightweight struct value type which allows the views to be created and destroyed like all the time in a very performant manner and that's what's going on when your ui updates in a swift ui app your view is being you know destroyed and recreated destroyed and recreated and it doesn't persist any data so you know when a view gets destroyed and recreated it kind of goes back to its default values well that's where state comes in so you can maintain the state of it for a lack of a better word that way when your views are created and redestroyed you persist any data marked as state so now that you got the big picture explanation let's dive into some code and see it in action so here we are on the main view of a very basic you know weather ui app i did this for my swift ui fundamentals course check it out link in the description but again the very basic example of state is a boolean here is night and you see to make it a state variable we marked it as state and again just to kind of refresh what i talked about earlier my content view like the main view is a struct right lightweight performant created and destroyed all the time so what this is night variable is doing uh basically when i tap this change day button you see my background goes to like dark and then the moon pops up well you know that's what all this code down here is doing right we're showing a different image based on is night variable here well as the ui is constantly being updated i always want is night to reflect whatever you know i chose as the user to tap this button right here it is is knight is false now his night is true his night is false right i want that to persist anytime my view needs to re-render or update right i don't want if my view needs to be updated to go back to the default you know is night equals false in my default image of the cloud so again that is state in action swift ui manages this in storage that's another thing to know like you don't have to do anything with it like swift ui takes care of it for you so again as content view is being destroyed recreated destroyed recreated we're persisting this data here our boolean whether it's true or false we persist that in storage somewhere that way our ui stays up to date and now that you've seen it in action to really drive the point home on the concept let's go to the documentation for state right apple's documentation says it's a property wrapper type that you can read and write a value managed by swift ui and then here this will explain kind of what i just said here right the overview swift ui manages the storage of any property you declare as state again that's what we did here in xcode right we marked it as state when the state value changes right so anytime you change a state right we're changing the boolean is night from true to false anytime something mark state changes the view invalidates its appearance and recomputes the body right that's what i meant like it just it basically redraws itself use the state as the single source of truth for a given view that's another thing state should be back to xcode here state should always be marked private because you don't want to share states in between views so it's isolated to this view now if you're here learning about state and swift ui hopefully you're trying to build some great apps and if you're building great apps you're probably going to need a website for that app or to add it to your portfolio and that brings me to today's sponsor squarespace now i know as a developer you might have the itch to build your own website right we're developers after all however you know building and maintaining a website making sure it looks great on all screen sizes all different browsers like it's actually a lot of work and i don't know if you're like me like i just want to build apps i don't want to maintain a website right so let squarespace handle that for you like they have all kinds of great themes they handle all the seo and the analytics for you and it's just a great way to get a landing page or a website for your app or your own ios developer portfolio up and running very quickly so when you're ready to build your website go to squarespace.com to check it out and when you're ready to actually launch it go to squarespace.com sean allen to get 10 off your first purchase of a website or domain all right so that was state in a nutshell and this is quite a big mind shift if you're coming from ui kit so please if you have any questions about state feel free to leave it in the comments i'll hop in and answer them hope you enjoyed the video we'll see you in the next one you

Channel: Sean Allen

Views: 17,557

Keywords: Swift, Swift Tutorial, iOS Developer, iOS Development, Swift Code Tutorial, Swift app tutorial, SwiftUI, SwiftUI State, SwiftUI Property Wrappers, Swiftui state vs binding, swiftui state management, swiftui state binding, swiftui data flow, swiftui data management, swiftui data binding, swiftui persistent data, basic swiftui, swiftui basics, swiftui fundamendals, swiftui 2.0

Id: 48JYBb5yJ0s

Length: 4min 31sec (271 seconds)

Published: Fri Jan 29 2021