Flickering with .searchable List - swiftui

Question

For the example, you need to add LoremSwiftum with SPM.
I'm found that when using the .init(_:id:rowContent:) constructor of List, there is flickering of the row items in the search field.
Video of what it looks like
import SwiftUI
import LoremSwiftum
let words = Array(Set(Lorem.words(3000).components(separatedBy: " ")))
struct ContentView: View {
#State var searchText = ""
var searchedWords: [String] {
searchText.isEmpty ? words : Array(words.filter { $0.localizedCaseInsensitiveContains(searchText) }.prefix(50))
}
var body: some View {
NavigationView {
List(searchedWords, id:\.self) { word in
HStack {
Rectangle().frame(width: 50, height: 50).foregroundColor(.red)
Text(word)
}
}
.searchable(text: $searchText, placement: .navigationBarDrawer(displayMode: .always))
}
}
}
Using .indices makes the flicker go away, ie:
List(searchedWords.indices, id:\.self) { i in
let word = words[I]
...
}
although as I understand it, using .indices can cause problems when the items change.
Using .id(UUID()) on the List also makes the flickering go away, although this has some problems as well.
So, how can I use the correct constructor of List and not have awful flickering of the items when searching?

Answer 1

Try avoiding computed properties for lists identifiable at least.
I had next object for list item:
struct Message: Identifiable, Equatable, Codable {
var id: String { UUID().uuidString }
let title: String
let message: String
}
It was flickering very similar to your example.
Changing structure to next one solved issue for me.
struct Message: Identifiable, Equatable, Codable {
let id: String
let title: String
let message: String
init(title: String, message: String) {
self.id = UUID().uuidString
self.title = title
self.message = message
}
}

Answer 2

I am using the following code and I don't experience the flicker.
struct ContentView: View {
#State private var words = Array(Set(Lorem.words(3000).components(separatedBy: " ")))
#State private var searchText: String = ""
#State private var filteredWords: [String] = []
var body: some View {
NavigationStack {
List(filteredWords, id: \.self) { word in
HStack {
Rectangle().frame(width: 50, height: 50).foregroundColor(.red)
Text(word)
}
}.searchable(text: $searchText)
.onChange(of: searchText) { search in
filteredWords = words.filter({ $0.starts(with: search.lowercased())})
}
.onAppear {
filteredWords = words
}
}
}
}