Audit and improve SwiftUI runtime performance. Use when diagnosing slow rendering, janky scrolling, high CPU, memory usage, excessive view updates, layout…
SwiftUI Performance
Audit SwiftUI view performance end-to-end, from instrumentation and baselining to root-cause analysis and concrete remediation steps.
Contents
Workflow Decision Tree
1. Code-First Review
2. Guide the User to Profile
3. Analyze and Diagnose
4. Remediate
Common Code Smells (and Fixes)
5. Verify
Outputs
Instruments Profiling
Identity and Lifetime
Lazy Loading Patterns
State and Observation Optimization
Common Mistakes
Review Checklist
References
Workflow Decision Tree
If the user provides code, start with "Code-First Review."
If the user only describes symptoms, ask for minimal code/context, then do "Code-First Review."
If code review is inconclusive, go to "Guide the User to Profile" and ask for a trace or screenshots.
1. Code-First Review
Collect:
Target view/feature code.
Data flow: state, environment, observable models.
Symptoms and reproduction steps.
Focus on:
View invalidation storms from broad state changes.
Unstable identity in lists (id churn, UUID() per render).
Top-level conditional view swapping (if/else returning different root branches).
Heavy work in body (formatting, sorting, image decoding).
Layout thrash (deep stacks, GeometryReader, preference chains).
Large images without downsampling or resizing.
Over-animated hierarchies (implicit animations on large trees).
Provide:
Likely root causes with code references.
Suggested fixes and refactors.
If needed, a minimal repro or instrumentation suggestion.
2. Guide the User to Profile
Explain how to collect data with Instruments:
Use the SwiftUI template in Instruments.
Profile a Release build on a real device when possible.
Reproduce the exact interaction (scroll, navigation, animation).
Capture SwiftUI lanes, Time Profiler, and Hangs/Hitches when relevant.
Export or screenshot the relevant lanes and the call tree.
Ask for:
Trace export or screenshots of SwiftUI lanes + Time Profiler call tree.
Device/OS/build configuration.
3. Analyze and Diagnose
Prioritize likely SwiftUI culprits:
View invalidation storms from broad state changes.
Unstable identity in lists (id churn, UUID() per render).
Top-level conditional view swapping (if/else returning different root branches).
Heavy work in body (formatting, sorting, image decoding).
Layout thrash (deep stacks, GeometryReader, preference chains).
Large images without downsampling or resizing.
Over-animated hierarchies (implicit animations on large trees).
Summarize findings with evidence from traces/logs.
4. Remediate
Apply targeted fixes:
Narrow state scope (@State/@Observable closer to leaf views).
Stabilize identities for ForEach and lists.
Move heavy work out of body (precompute, cache, @State).
Use equatable() or value wrappers for expensive subtrees.
Downsample images before rendering.
Reduce layout complexity or use fixed sizing where possible.
Common Code Smells (and Fixes)
Look for these patterns during code review.
Expensive formatters in body
var body: some View {
let number = NumberFormatter() // slow allocation
let measure = MeasurementFormatter() // slow allocation
Text(measure.string(from: .init(value: meters, unit: .meters)))
}
Prefer cached formatters in a model or a dedicated helper:
final class DistanceFormatter {
static let shared = DistanceFormatter()
let number = NumberFormatter()
let measure = MeasurementFormatter()
}
Computed properties that do heavy work
var filtered: [Item] {
items.filter { $0.isEnabled } // runs on every body eval
}
Prefer precompute or cache on change:
@State private var filtered: [Item] = []
// update filtered when inputs change
Sorting/filtering in body or ForEach
// DON'T: sorts or filters on every body evaluation
ForEach(items.sorted(by: sortRule)) { item in Row(item) }
ForEach(items.filter { $0.isEnabled }) { item in Row(item) }
Prefer precomputed, cached collections with stable identity. Update on input change, not in body.
Unstable identity
ForEach(items, id: \.self) { item in
Row(item)
}
Avoid id: \.self for non-stable values; use a stable ID.
Top-level conditional view swapping
var content: some View {
if isEditing {
editingView
} else {
readOnlyView
}
}
Prefer one stable base view and localize conditions to sections/modifiers (for example inside toolbar, row content, overlay, or disabled). This reduces root identity churn and helps SwiftUI diffing stay efficient.
Image decoding on the main thread
Image(uiImage: UIImage(data: data)!)
Prefer decode/downsample off the main thread and store the result.
Broad dependencies in observable models
@Observable class Model {
var items: [Item] = []
}
var body: some View {
Row(isFavorite: model.items.contains(item))
}
Prefer granular view models or per-item state to reduce update fan-out.
5. Verify
Ask the user to re-run the same capture and compare with baseline metrics.
Summarize the delta (CPU, frame drops, memory peak) if provided.
Outputs
Provide:
A short metrics table (before/after if available).
Top issues (ordered by impact).
Proposed fixes with estimated effort.
Instruments Profiling
Use the SwiftUI template in Instruments (Cmd+I to profile). Current SwiftUI lanes include Update Groups, Long View Body Updates, Long Representable Updates / Representable Updates, Other Long Updates / Other Updates, and the Cause & Effect Graph. Correlate those with Time Profiler and Hangs/Hitches.
Add Self._printChanges() in debug builds to log which property triggered a view update:
var body: some View {
#if DEBUG
let _ = Self._printChanges() // "MyView: @self, _count changed."
#endif
Text("Count: \(count)")
}
See references/optimizing-swiftui-performance-instruments.md for the full profiling workflow.
Identity and Lifetime
Structural Identity vs Explicit Identity
SwiftUI assigns every view an identity used to track its lifetime, state, and animations.
Structural identity (default): determined by the view's position in the view hierarchy. SwiftUI uses the call-site location in body to distinguish views.
Explicit identity: you assign with .id(_:) modifier or ForEach(items, id: \.stableID).
// Structural identity: SwiftUI knows these are different views by position
VStack {
Text("First") // position 0
Text("Second") // position 1
}
How Identity Tracks View Lifetime
When a view's identity changes, SwiftUI treats it as a new view:
All @State is reset.
onAppear fires again.
Animations may restart.
Transition animations play (if defined).
When identity stays the same, SwiftUI updates the existing view in place, preserving state and providing smooth transitions.
AnyView in Hot Paths
AnyView erases concrete view type information. In hot list or table rows, that can hide structural information SwiftUI uses for row shape and diffing:
// DON'T: AnyView hides row structure in hot paths
func makeView(for item: Item) -> AnyView {
if item.isPremium {
return AnyView(PremiumRow(item: item))
} else {
return AnyView(StandardRow(item: item))
}
}
// DO: use @ViewBuilder to preserve structural identity
@ViewBuilder
func makeView(for item: Item) -> some View {
if item.isPremium {
PremiumRow(item: item)
} else {
StandardRow(item: item)
}
}
Prefer @ViewBuilder or generic composition in repeated subtrees. Keep type erasure at API boundaries unless profiling proves it is harmless in that path.
Ternary Modifiers Preserve Structural Identity
if/else in a view builder creates _ConditionalContent — two separate view branches with distinct identities. When the condition changes, SwiftUI destroys one branch and creates the other, resetting all @State.
For toggling modifiers on the same view, use a ternary expression instead:
// DON'T: if/else creates two separate Text views with different identities
if isHighlighted {
Text(title).foregroundStyle(.yellow)
} else {
Text(title).foregroundStyle(.primary)
}
// DO: ternary keeps one Text view, just changes the modifier value
Text(title)
.foregroundStyle(isHighlighted ? .yellow : .primary)
This preserves the view's identity (and its state) across the condition change, and SwiftUI can animate the transition smoothly.
Use if/else when the view type itself differs between branches. Use ternary when only a property or modifier changes.
id() Modifier Impacts
The .id() modifier assigns explicit identity. Changing the value destroys and recreates the view:
// DON'T: UUID() changes every render, destroying and recreating the view each time
ScrollView {
LazyVStack {
ForEach(items) { item in
Row(item: item)
.id(UUID()) // kills performance -- new identity every render
}
}
}
// DO: use a stable identifier
ForEach(items) { item in
Row(item: item)
.id(item.stableID) // identity only changes when the item actually changes
}
Intentional .id() change is useful for resetting state (e.g., .id(selectedTab) to reset a scroll position when switching tabs).
Lazy Loading Patterns
LazyVStack and LazyHStack
Lazy stacks evaluate and render only the portion SwiftUI needs for the current scroll position and nearby prefetching, instead of eagerly materializing every child.
ScrollView {
LazyVStack {
ForEach(items) { item in
ItemRow(item: item)
}
}
}
Key behaviors:
Off-screen views are removed from the lazy stack. SwiftUI may keep them briefly, then delete the views and their view-local state.
Persist important row state outside the row view if it must survive scrolling away.
Body and layout work can happen before onAppear because of prefetching. Do not make onAppear the only setup point for data a row needs to render.
Treat onAppear and onDisappear as visibility signals, not lifetime guarantees.
LazyVGrid and LazyHGrid
Use lazy grids for multi-column layouts:
// Adaptive: as many columns as fit with minimum width
let columns = [GridItem(.adaptive(minimum: 150))]
ScrollView {
LazyVGrid(columns: columns) {
ForEach(photos) { photo in
PhotoThumbnail(photo: photo)
}
}
}
// Fixed: exact number of equal columns
let fixedColumns = [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible()),
]
Lazy Container Guardrails
Filter data before ForEach; avoid if branches that make each element produce zero or one row.
Keep each ForEach element to a constant number of top-level subviews. Wrap row contents in a stable container if needed. Use -LogForEachSlowPath YES while debugging list/table slow paths.
Avoid absolute content-size or content-offset assumptions; lazy stacks estimate off-screen sizes.
Avoid geometry feedback loops in lazy rows. Prefer stable sizing, layout primitives, or a custom Layout before feeding geometry changes back into row state.
When to Use Lazy vs Eager Stacks
No item-count threshold makes lazy containers automatically correct. Start with the simplest container that matches the UI, then switch when profiling shows eager construction, layout, or update work is material.
Scenario
Default
Small, fixed, fully visible content
VStack / HStack
Large or unbounded custom scroll content
LazyVStack / LazyHStack, then profile
System-style rows, edit actions, swipe actions, or very large feeds
List is often the better starting point
Always-visible content
Eager stack; lazy adds bookkeeping without benefit
Custom scroll control with many rows
LazyVStack inside ScrollView, with stable identity and constant row shape
Important: Avoid unconstrained GeometryReader in lazy rows when it drives row size or shared state. Use stable sizing, layout APIs, or narrowly scoped .onGeometryChange (iOS 16+) that thresholds values and does not invalidate the whole list.
State and Observation Optimization
@Observable Granular Tracking
@Observable (Observation framework, iOS 17+) tracks property access at the per-property level. A view only re-evaluates when properties it actually read in body change:
@Observable class UserProfile {
var name: String = ""
var avatarURL: URL?
var biography: String = ""
}
// This view ONLY re-renders when `name` changes -- not when
// biography or avatarURL change, because it only reads `name`
struct NameLabel: View {
let profile: UserProfile
var body: some View {
Text(profile.name)
}
}
This is a significant improvement over ObservableObject + @Published, which invalidates all observing views when any published property changes.
Avoiding Observation Scope Pollution
If a view reads many properties from an @Observable model in body, it re-renders when any of those properties change. Push reads into child views to narrow the scope:
// DON'T: reads name, email, avatar, and settings in one body
struct ProfileView: View {
let model: ProfileModel
var body: some View {
VStack {
Text(model.name) // tracks name
Text(model.email) // tracks email
AsyncImage(url: model.avatar) // tracks avatar
SettingsForm(model.settings) // tracks settings
}
}
}
// DO: split into child views so each only tracks what it reads
struct ProfileView: View {
let model: ProfileModel
var body: some View {
VStack {
NameRow(model: model) // only tracks name
EmailRow(model: model) // only tracks email
AvatarView(model: model) // only tracks avatar
SettingsForm(model: model) // only tracks settings
}
}
}
Computed Properties for Derived State
Use computed properties on @Observable models to derive state without introducing extra stored properties that widen observation scope:
@Observable class ShoppingCart {
var items: [CartItem] = []
// Views reading `total` only re-render when `items` changes
var total: Decimal {
items.reduce(0) { $0 + $1.price * Decimal($1.quantity) }
}
}
Common Mistakes
Profiling Debug builds. Debug builds include extra runtime checks and disable optimizations, producing misleading perf data. Profile Release builds on a real device.
Observing an entire model when only one property is needed. Break large @Observable models into focused ones, or use computed properties/closures to narrow observation scope.
Using geometry feedback inside ScrollView items. GeometryReader or noisy geometry state can force repeated layout. Prefer stable sizing, custom layout, or narrowly scoped .onGeometryChange (iOS 16+) with thresholds.
Calling DateFormatter() or NumberFormatter() inside body. These are expensive to create. Make them static or move them outside the view.
Animating non-equatable state. If SwiftUI cannot determine equality, it redraws every frame. Conform state to Equatable, then use .animation(_:value:) for simple value-bound changes or .animation(_:body:) for narrower modifier-scoped implicit animation.
Large flat List without identifiers. Use id: or make items Identifiable so SwiftUI can diff efficiently instead of rebuilding the entire list.
Unnecessary @State wrapper objects. Wrapping a simple value type in a class for @State defeats value semantics. Use plain @State with structs.
Blocking MainActor with synchronous I/O. File reads, JSON parsing of large payloads, and image decoding should happen off the main actor. Prefer nonisolated async helpers or dedicated actors; reserve Task.detached for cases where you intentionally break actor inheritance and handle cancellation yourself.
Review Checklist
No DateFormatter/NumberFormatter allocations inside body
Large lists use Identifiable items or explicit id:
@Observable models expose only the properties views actually read
Heavy computation is off MainActor (image processing, parsing)
Lazy rows have stable identity, constant top-level row shape, and prefiltered data
Geometry changes in scroll rows are thresholded and do not feed broad state
Row rendering does not depend on onAppear as the only setup point
Implicit animations use .animation(_:value:) for value-bound changes or .animation(_:body:) for narrower modifier scope
No synchronous network/file I/O on the main thread
Profiling done on Release build, real device
@Observable view models are @MainActor-isolated; types crossing concurrency boundaries are Sendable
References
Demystify SwiftUI performance (WWDC23): references/demystify-swiftui-performance-wwdc23.md
Optimizing SwiftUI performance with Instruments: references/optimizing-swiftui-performance-instruments.md
Understanding hangs in your app: references/understanding-hangs-in-your-app.md
Understanding and improving SwiftUI performance: references/understanding-improving-swiftui-performance.md
WWDC transcript sources: references/wwdc-session-sources.md
1fdon't have the plugin yet? install it then click "run inline in claude" again.
diagnose and fix swiftui rendering performance problems end-to-end. use this skill when a user reports janky scrolling, high cpu usage, excessive view updates, slow animations, memory bloat, or layout thrash. the skill moves from code review through instrumentation profiling to root-cause analysis and concrete fixes, prioritizing by impact.
required:
optional but recommended:
external connections:
input: user provides code, symptoms, and repro steps.
action:
output: summary of likely root causes with code references, or decision to profile.
input: code review is inconclusive or user requests data-driven diagnosis.
action:
output: trace file or screenshot, device/os/build config, metrics (if visible: frame rate, cpu, memory).
input: code and trace (or screenshots), baseline metrics.
action:
output: ordered list of issues with evidence (trace reference, code line, estimated impact).
input: diagnosis from step 3.
action:
output: concrete code changes with before/after snippets.
input: user re-runs the same instruments capture after applying fixes.
action:
output: delta table (before/after cpu %, frame drops, memory peak) and sign-off.
if user provides working code but only a symptom description (e.g., "scrolling is janky"): then ask for repro steps, build config (debug or release), and the exact view code. do not guess. code review without context is unreliable.
if code review finds an obvious culprit (e.g., uuid() in .id(), formatters in body, broad @observable model): then propose a fix immediately and skip profiling. provide a code example and estimated effort. offer to verify later if the user applies the fix.
if code review is inconclusive (code looks reasonable but user reports performance issues): then move to step 2 (profiling). code review alone cannot detect all problems; instrumentation is required.
if the user is profiling a debug build: then stop and ask them to profile a release build on a physical device. debug builds disable optimizations and include runtime overhead, producing misleading data.
if the trace shows a tall stack in swiftui layout or rendering code: then the culprit is likely layout thrash (deep nesting, geometryreader, preference chains) or a large view count. check for lazy container misuse or unstable identity.
if the trace shows many body re-evaluations in a single view: then the culprit is likely broad @observable scope or unstable state dependency. narrow the scope by splitting the model or moving reads into child views.
if the user reports frame drops but cpu is low: then the bottleneck may be memory (gc pauses), gpu rendering (overdraw, blend mode cost), or i/o (image loading blocking the main thread). ask for memory profiling and check for synchronous i/o in body.
if images are large or decoding happens synchronously in body: then decode off the main thread and store the uiimage result. use task.detached or asyncimage.
if a list has no identifiers or uses id: .self on mutable items: then swiftui cannot diff efficiently and rebuilds the entire list on each change. fix by making items identifiable or using a stable id: closure.
if the user is animating non-equatable state: then swiftui cannot determine equality and redraws every frame. conform the state to equatable, then use .animation(_:value:) for simple value-bound changes.
provide a report with these sections:
metric | before | after | delta
--------------|--------|--------|--------
cpu (avg) | 45% | 12% | -73%
frame drops | 24 | 2 | -92%
memory peak | 180mb | 165mb | -8%
body evals/sec | 1200 | 80 | -93%
all fixes must include a minimal code example and rationale.
the skill worked if:
if metrics do not improve after a fix, either the fix addressed a non-critical issue or the diagnosis was incomplete. loop back to profiling and dig deeper.
problem: dateformatter(), numberformatter(), measurementformatter() are expensive to create and re-create on every body evaluation.
// DON'T
var body: some View {
let formatter = NumberFormatter()
Text(formatter.string(from: 42) ?? "")
}
fix: cache formatters in a static or model property.
// DO
final class AppFormatters {
static let number = NumberFormatter()
static let measure = MeasurementFormatter()
}
var body: some View {
Text(AppFormatters.number.string(from: 42) ?? "")
}
problem: id: .self fails for mutable items; uuid() per render destroys and recreates views.
// DON'T
ForEach(items, id: \.self) { item in Row(item) }
ForEach(items) { item in Row(item).id(UUID()) }
fix: use a stable identifier.
// DO
ForEach(items, id: \.id) { item in Row(item) }
// or if items are Identifiable
ForEach(items) { item in Row(item) }
problem: filter and sort run on every body evaluation, not just when data changes.
// DON'T
ForEach(items.filter { $0.isEnabled }.sorted(by: { $0.name < $1.name })) { item in
Row(item)
}
fix: precompute and cache, then update only when inputs change.
// DO
@State private var filtered: [Item] = []
@State private var sorted: [Item] = []
.onAppear {
updateFiltered()
}
.onChange(of: items) {
updateFiltered()
}
private func updateFiltered() {
filtered = items.filter { $0.isEnabled }
sorted = filtered.sorted { $0.name < $1.name }
}
var body: some View {
ForEach(sorted, id: \.id) { item in Row(item) }
}
problem: if/else at the root of body creates two separate view types, causing identity churn and state reset.
// DON'T
var body: some View {
if isEditing {
EditingView(model: model)
} else {
ReadOnlyView(model: model)
}
}
fix: use one stable base view and localize conditions to modifiers or child sections.
// DO: one stable base, conditions in modifiers
var body: some View {
Form {
Section {
TextField("Name", text: $name)
.disabled(!isEditing)
}
}
.toolbar {
ToolbarItem {
Button(isEditing ? "Done" : "Edit") { isEditing.toggle() }
}
}
}
problem: a single @observable model tracks many properties; a view reads all of them, so it re-renders when any change.
// DON'T
@Observable class Profile {
var name: String = ""
var email: String = ""
var avatar: URL?
var settings: [String: Bool] = [:]
}
struct ProfileView: View {
let profile: Profile
var body: some View {
VStack {
Text(profile.name)
Text(profile.email)
AsyncImage(url: profile.avatar)
Toggle("Dark Mode", isOn: $settings["darkMode"] ?? false)
}
}
}
fix: split into focused child views so each only reads what it needs.
// DO
struct ProfileView: View {
let profile: Profile
var body: some View {
VStack {
NameRow(profile: profile)
EmailRow(profile: profile)
AvatarView(profile: profile)
SettingsToggle(profile: profile)
}
}
}
struct NameRow: View {
let profile: Profile
var body: some View {
Text(profile.name) // only reads name
}
}
problem: decoding happens on the main thread, blocking render.
// DON'T
let uiImage = UIImage(data: data)!
Image(uiImage: uiImage)
fix: decode off-thread and store the result.
// DO
@State private var image: UIImage?
.onAppear {
Task.detached {
let decoded = await decodeImageData(data)
await MainActor.run {
self.image = decoded
}
}
}
var body: some View {
if let image {
Image(uiImage: image)
}
}
private func decodeImageData(_ data: Data) -> UIImage? {
return UIImage(data: data)?.resized(to: CGSize(width: 200, height: 200))
}
problem: animating a broad state change triggers implicit animation on every view in the tree, causing jank.
// DON'T
withAnimation {
isExpanded.toggle() // animates 100+ subviews
}
fix: use value-bound animation or narrow the modifier scope.
// DO: value-bound animation
@State private var isExpanded = false
var body: some View {
Section {
if isExpanded { details }
}
.animation(.easeInOut, value: isExpanded)
}
// or scope to a single modifier
var body: some View {
VStack {
Button("Toggle") { isExpanded.toggle() }
if isExpanded {
details
.transition(.opacity)
}
}
}
problem: geometryreader forces eager measurement and defeats lazy loading.
// DON'T
LazyVStack {
ForEach(items) { item in
GeometryReader { geo in
Row(item: item)
.frame(height: geo.size.height)
}
}
}
fix: move measurement outside the lazy container or use ongeometrychange (ios 16+).
// DO: measure outside
var body: some View {
GeometryReader { geo in
LazyVStack {
ForEach(items) { item in
Row(item: item)
.frame(height: 44)
}
}
}
}
// or use ongeometrychange
LazyVStack {
ForEach(items) { item in
Row(item: item)
.onGeometryChange(
for: CGSize.self,
of: { $0.size },
action: { size in
itemHeights[item.id] = size.height
}
)
}
}
problem: computed properties re-evaluate on every body call.
// DON'T
var filtered: [Item] {
items.filter { $0.isEnabled } // runs every time body is called
}
var body: some View {
List(filtered) { item in Row(item) }
}
fix: use @state and update on change.
// DO
@State private var filtered: [Item] = []
.onAppear {
updateFiltered()
}
.onChange(of: items) {
updateFiltered()
}
private func updateFiltered() {
filtered = items.filter { $0.isEnabled }
}
var body: some View {
List(filtered) { item in Row(item) }
}
problem: anyview destroys type identity and forces inefficient diffing.
// DON'T
func makeView(for item: Item) -> AnyView {
if item.isPremium {
return AnyView(PremiumRow(item: item))
} else {
return AnyView(StandardRow(item: item))
}
}
fix: use @viewbuilder to preserve structural identity.
// DO
@ViewBuilder
func makeView(for