Best way to implement expensive derived properties in SwiftUI? - swift

Question

I have a somewhat complicated situation. I'm implementing a simple scrolling chat view in SwiftUI. There's a ChatView with a list of ChatMessageCells. Each Message has a User, and that has a ProfileImage which is a struct made up of a couple of fields (bucket and key, used to construct the URL to the image on the server). This can periodically update on the User class, and can also be nil.
Update: This is not a particularly expensive operation, but let’s say for the sake of argument that it is expensive, and I only want to recompute it once. There basically two ways: recompute when (one of the) source properties changes, or recompute when needed and store the result. I’d like to know the best way to do both.
The view needs to construct the URL, because it needs to specify the desired image size for the image. In this way, the URL is a derived property of the message.user.profileImage property.
I tried using .onChange(of: self.message.user.profileImage) in my ChatMessageCell view hierarchy to then compute the URL and set self.profileImageURL, but you can’t set simple properties. So I adorned self.profileImageURL with #State, which allowed the code to compile, and I assign it in init(). But if it’s #State, that assignment doesn't seem to have any effect.
So, I'm pretty unsure how to do this.
ChatView and ChatMessageCell look like this:
struct ChatView : View
{
#ObservedObject public var stream : ChatStream
var body: some View {
ScrollViewReader { scrollView in
ScrollView {
LazyVStack {
ForEach(self.stream.messages) { inMsg in
ChatMessageCell(message: inMsg)
}
}
}
}
}
struct
ChatMessageCell: View
{
public let message : ChatStream.Message
#State var profileImageURL : URL?
init(message inMessage: ChatStream.Message)
{
self.message = inMessage
let image = inMessage.user.profileImage
let url = image?.sharpImageURL(forSize: kProfileImageSize)
self.profileImageURL = url // <-- doesn't assign if #State
}
var body: some View
{
VStack(alignment: .leading)
{
Text("Key: \(self.message.user.profileImage?.key ?? "nil")")
Text("URL: \(self.profileImageURL?.absoluteString ?? "nil")")
// This is just for debugging. Really there's a `KFImage` here that’s
// supposed to async load the image.
}
.onChange(of: self.message.user.profileImage)
{ inVal in
let url = inVal?.sharpImageURL(forSize: kProfileImageSize)
self.profileImageURL = url // <-- can't modify if not #State
}
}
}
Other classes:
class ChatStream
{
public struct Message
{
var id : Int
var date : Date
var message : String
var user : User
init(fromIncoming inMsg: IncomingMessage, user inUser: User)
{
self.id = inMsg.id
self.date = inMsg.date
self.message = inMsg.message
self.user = inUser
}
}
public class User
{
typealias ID = String
let id : ID
var username : String
var onlineAt : Date?
#Published var profileImage : ProfileImage?
init(fromIncoming inUser: IncomingUser)
{
self.id = inUser.id
self.username = inUser.username
self.onlineAt = inUser.onlineAt
self.profileImage = inUser.profileImage
}
func update(fromIncoming inUser: IncomingUser)
{
self.username = inUser.username
self.onlineAt = inUser.onlineAt
self.profileImage = inUser.profileImage
}
}
#Published var messages = OrderedSet<Message>()
#Published var users = [User.ID : User]()
}
extension ChatStream : ObservableObject {}
extension ChatStream.ProfileImage : Equatable {}

Answer 1

It would be more straightforward to have message be an observable object, which triggers changes when the user property updates, and have the URL be a computed property of message. You haven't shown the implementation of Message or User so it's hard to be specific. If Message is a struct then you could just have a reference to the user as an observable object.