{"id":2731,"date":"2020-02-07T20:48:32","date_gmt":"2020-02-07T20:48:32","guid":{"rendered":"http:\/\/4310.mynmi.net\/?page_id=2731"},"modified":"2026-03-21T22:01:24","modified_gmt":"2026-03-21T22:01:24","slug":"understanding-state-and-binding","status":"publish","type":"page","link":"https:\/\/nmi.cool\/appdev\/understanding-state-and-binding\/","title":{"rendered":"Understanding State and Binding (Chapter 7)"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>This short lesson introduces &#8220;state management&#8221; by showing how to change the appearance of buttons based on user actions. Tap a button for example, and the color and\/or size of the button can be made to vary based on the fact that it was tapped.<\/p>\n\n\n\n<p>When asked to extract a subview from the button, make sure you wrap the button in a VStack and then extract it.<\/p>\n\n\n\n<p><strong>Read Chapter 7: Understanding State and Binding<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Key Takeaways<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n\n<li><code>@State<\/code> marks a variable as a source of truth for the view \u2014 when it changes, SwiftUI automatically re-renders the affected parts of the UI.<\/li>\n\n\n<li><code>@Binding<\/code> lets a child view read and write a <code>@State<\/code> variable owned by a parent, enabling two-way data flow between views.<\/li>\n\n\n<li>You never manually refresh the UI in SwiftUI \u2014 state changes trigger re-renders automatically.<\/li>\n\n\n<li>Practical tip: wrap your <code>Button<\/code> in a <code>VStack<\/code> <em>before<\/em> extracting the subview, otherwise Xcode will not extract it correctly.<\/li>\n\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Overview This short lesson introduces &#8220;state management&#8221; by showing how to change the appearance of buttons based on user actions. Tap a button for example, and the color and\/or size of the button can be made to vary based on the fact that it was tapped. When asked to extract a subview from the button, &hellip; <a href=\"https:\/\/nmi.cool\/appdev\/understanding-state-and-binding\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Understanding State and Binding (Chapter 7)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2731","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2731","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/comments?post=2731"}],"version-history":[{"count":5,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2731\/revisions"}],"predecessor-version":[{"id":4167,"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/pages\/2731\/revisions\/4167"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/appdev\/wp-json\/wp\/v2\/media?parent=2731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}