10.4 C
Canberra
Friday, September 20, 2024

Understanding SwiftUI view lifecycles – Ole Begemann


I wrote an app known as SwiftUI View Lifecycle. The app permits you to observe how totally different SwiftUI constructs and containers have an effect on a view’s lifecycle, together with the lifetime of its state and when onAppear will get known as. The code for the app is on GitHub. It may be constructed for iOS and macOS.

Once we write SwiftUI code, we assemble a view tree that consists of nested view values. Situations of the view tree are ephemeral: SwiftUI always destroys and recreates (elements of) the view tree because it processes state adjustments.

The view tree serves as a blueprint from which SwiftUI creates a second tree, which represents the precise view “objects” which are “on display screen” at any given time (the “objects” may very well be precise UIView or NSView objects, but additionally different representations; the precise which means of “on display screen” can fluctuate relying on context). Chris Eidhof likes to name this second tree the render tree (the hyperlink factors to a 3 minute video the place Chris demonstrates this duality, extremely really helpful).

The render tree persists throughout state adjustments and is utilized by SwiftUI to ascertain view id. When a state change causes a change in a view’s worth, SwiftUI will discover the corresponding view object within the render tree and replace it in place, quite than recreating a brand new view object from scratch. That is in fact key to creating SwiftUI environment friendly, however the render tree has one other essential perform: it controls the lifetimes of views and their state.

We will outline a view’s lifetime because the timespan it exists within the render tree. The lifetime begins with the insertion into the render tree and ends with the elimination. Importantly, the lifetime extends to view state outlined with @State and @StateObject: when a view will get faraway from the render tree, its state is misplaced; when the view will get inserted once more later, the state shall be recreated with its preliminary worth.

The SwiftUI View Lifecycle app tracks three lifecycle occasions for a view and shows them as timestamps:

  • @State = when the view’s state was created (equal to the beginning of the view’s lifetime)
  • onAppear = when onAppear was final known as
  • onDisappear = when onDisappear was final known as

A table with three rows. @State: 1:26 ago. onAppear: 0:15 ago. onDisappear: 0:47 ago.
The lifecycle monitor view shows the timestamps when sure lifecycle occasions final occurred.

The app permits you to observe these occasions in numerous contexts. As you click on your means by means of the examples, you’ll discover that the timing of those occasions adjustments relying on the context a view is embedded in. For instance:

  • An if/else assertion creates and destroys its little one views each time the situation adjustments; state shouldn’t be preserved.
  • A ScrollView eagerly inserts all of its youngsters into the render tree, no matter whether or not they’re contained in the viewport or not. All youngsters seem instantly and by no means disappear.
  • A Record with dynamic content material (utilizing ForEach) lazily inserts solely the kid views which are at present seen. However as soon as a baby view’s lifetime has began, the record will preserve its state alive even when it will get scrolled offscreen once more. onAppear and onDisappear get known as repeatedly as views are scrolled into and out of the viewport.
  • A NavigationStack calls onAppear and onDisappear as views are pushed and popped. State for mother or father ranges within the stack is preserved when a baby view is pushed.
  • A TabView begins the lifetime of all little one views instantly, even the non-visible tabs. onAppear and onDisappear get known as repeatedly because the consumer switches tabs, however the tab view retains the state alive for all tabs.

Listed below are a couple of classes to remove from this:

  • Completely different container views could have totally different efficiency and reminiscence utilization behaviors, relying on how lengthy they preserve little one views alive.
  • onAppear isn’t essentially known as when the state is created. It might probably occur later (however by no means earlier).
  • onAppear might be known as a number of occasions in some container views. In the event you want a facet impact to occur precisely as soon as in a view’s lifetime, think about writing your self an onFirstAppear helper, as proven by Ian Eager and Jordan Morgan in Operating Code Solely As soon as in SwiftUI (2022-11-01).

I’m certain you’ll discover extra attention-grabbing tidbits if you play with the app. Suggestions is welcome!



Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

[td_block_social_counter facebook="tagdiv" twitter="tagdivofficial" youtube="tagdiv" style="style8 td-social-boxed td-social-font-icons" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjM4IiwiZGlzcGxheSI6IiJ9LCJwb3J0cmFpdCI6eyJtYXJnaW4tYm90dG9tIjoiMzAiLCJkaXNwbGF5IjoiIn0sInBvcnRyYWl0X21heF93aWR0aCI6MTAxOCwicG9ydHJhaXRfbWluX3dpZHRoIjo3Njh9" custom_title="Stay Connected" block_template_id="td_block_template_8" f_header_font_family="712" f_header_font_transform="uppercase" f_header_font_weight="500" f_header_font_size="17" border_color="#dd3333"]
- Advertisement -spot_img

Latest Articles