Demystifying data flow through SwiftUI

The newly released SwiftUI allows you to write your interface declaratively. And with the new data flow mechanisms, you can write your data flow declaratively as well — and everything will update as you would expect it to, automatically. The concepts are powerful, but they can be a little confusing.

In this post, I’ll break down all the ways to move data declaratively through our SwiftUI views. Let’s start with a cheat sheet, and then we’ll move into descriptions and examples of each.

Property

Summary: read-only values provided by the parent view.

• A property is how a view defines what it expects its parent view to give to it in order for it to render, like a prop in React.
• These values are read-only. But when they change, SwiftUI automatically re-renders your view.
• Can have a default value, allowing a parent view to not pass its own value for the property.

Use when: Your view needs to simply render using a piece of data or state which the parent has, and that it does not need to modify.

Example: Here is an example, where a ContactAvatar component is made to reuse the code that formats the image, and different images can be passed to it using a property.