Preference keys in iOS Swift - UI Render Trace

Component - Preference keys

This UI component demonstrates how to use Preference Keys in SwiftUI to pass data up the view hierarchy. It allows child views to communicate values to their parent views in a clean and reactive way.

Widget Tree

VStack
├── Text ("Current Value: X")
└── ChildView
    └── Button ("Update Value")

The root view is a vertical stack (VStack) containing a Text label that shows the current value received via the preference key. Below it is a ChildView that contains a Button. When the button is tapped, it updates the preference key value, which the parent VStack reads and displays.

Render Trace - 3 Steps

Step 1: VStack

Step 2: Text

Step 3: ChildView

State Change - Re-render

Trigger:User taps the 'Update Value' button in ChildView

Before

Preference key value is 0, Text shows 'Current Value: 0'

→

After

Preference key value updates to 1, Text updates to 'Current Value: 1'

Re-renders:The VStack and its Text child re-render to reflect the updated preference key value

UI Quiz - 3 Questions

What does the Text widget display before the button is tapped?

A "Update Value"

B "Current Value: 1"

C "Current Value: 0"

D Empty text

Key Insight

Preference keys in SwiftUI let child views send data upwards to parent views without direct bindings. This pattern helps keep views decoupled and reactive, improving code clarity and UI responsiveness.

Practice

1. What is the main purpose of PreferenceKey in SwiftUI?

easy

A. To store user preferences permanently

B. To share simple data up the view hierarchy

C. To create custom buttons

D. To manage network requests

Solution

1. Step 1: Understand PreferenceKey role

   PreferenceKey is designed to pass data from child views up to parent views in SwiftUI.

2. Step 2: Differentiate from other uses

   It is not for permanent storage or UI elements but for sharing layout or state info upwards.

3. Final Answer:

   To share simple data up the view hierarchy -> Option B

4. Quick Check:

   PreferenceKey = share data up [OK]

Hint: PreferenceKey passes data upward, not stores or creates UI [OK]

Common Mistakes:

• Confusing PreferenceKey with UserDefaults
• Thinking it creates UI components
• Assuming it manages network tasks

2. Which of the following is the correct way to declare a PreferenceKey with a default value of 0 and a reduce function that sums values?

easy

A. struct MyKey: PreferenceKey { static var defaultValue = 0; static func reduce(value: Int, nextValue: () -> Int) { value += nextValue() } }

B. struct MyKey: PreferenceKey { static let defaultValue = 0; static func reduce(value: Int, nextValue: () -> Int) { value += nextValue() } }

C. struct MyKey: PreferenceKey { var defaultValue: Int = 0; func reduce(value: inout Int, nextValue: () -> Int) { value += nextValue() } }

D. struct MyKey: PreferenceKey { static var defaultValue: Int = 0; static func reduce(value: inout Int, nextValue: () -> Int) { value += nextValue() } }

Solution

1. Step 1: Check static defaultValue declaration

   It must be a static property with explicit type: static var defaultValue: Int = 0.

2. Step 2: Verify reduce function signature

   Reduce must be static, take inout value, and add nextValue: static func reduce(value: inout Int, nextValue: () -> Int).

3. Final Answer:

   struct MyKey: PreferenceKey { static var defaultValue: Int = 0; static func reduce(value: inout Int, nextValue: () -> Int) { value += nextValue() } } -> Option D

4. Quick Check:

   Static defaultValue and reduce with inout = struct MyKey: PreferenceKey { static var defaultValue: Int = 0; static func reduce(value: inout Int, nextValue: () -> Int) { value += nextValue() } } [OK]

Hint: defaultValue and reduce must be static with correct signatures [OK]

Common Mistakes:

• Missing static keyword on defaultValue or reduce
• Using var instead of static var for defaultValue
• Incorrect reduce function parameters

3. Given this code snippet, what will be printed?

struct CountKey: PreferenceKey {
  static var defaultValue = 0
  static func reduce(value: inout Int, nextValue: () -> Int) {
    value += nextValue()
  }
}

struct ContentView: View {
  var body: some View {
    VStack {
      Text("Hello").preference(key: CountKey.self, value: 1)
      Text("World").preference(key: CountKey.self, value: 2)
    }
    .onPreferenceChange(CountKey.self) { print($0) }
  }
}

medium

A. 3

B. 2

C. 1

D. 0

Solution

1. Step 1: Understand preference values set

   Two Text views set preferences with values 1 and 2 respectively.

2. Step 2: Apply reduce function logic

   Reduce sums values: 0 (default) + 1 + 2 = 3.

3. Final Answer:

   3 -> Option A

4. Quick Check:

   Sum of preferences = 3 [OK]

Hint: Reduce sums all values, so 1 + 2 = 3 [OK]

Common Mistakes:

• Assuming only last value is used
• Ignoring reduce function behavior
• Confusing defaultValue with output

4. Identify the error in this PreferenceKey implementation:

struct SizeKey: PreferenceKey {
  static var defaultValue: CGSize = .zero
  static func reduce(value: CGSize, nextValue: () -> CGSize) {
    value = nextValue()
  }
}

medium

A. reduce function must have inout parameter for value

B. defaultValue must be non-static

C. nextValue must return Int, not CGSize

D. PreferenceKey cannot use CGSize type

Solution

1. Step 1: Check defaultValue declaration

   defaultValue is correctly static with CGSize type.

2. Step 2: Inspect reduce function signature

   Reduce must take inout for value to modify it, but here it is a value parameter.

3. Final Answer:

   reduce function must have inout parameter for value -> Option A

4. Quick Check:

   Reduce needs inout value parameter [OK]

Hint: Reduce must use inout for value to update it [OK]

Common Mistakes:

• Forgetting inout keyword in reduce
• Changing defaultValue to non-static
• Wrong return type for nextValue

5. You want to pass the maximum width of child views up to a parent using PreferenceKey. Which implementation correctly combines widths to find the maximum?

hard

A. struct MaxWidthKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: CGFloat, nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}

B. struct MaxWidthKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value += nextValue()
}
}

C. struct MaxWidthKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = max(value, nextValue())
}
}

D. struct MaxWidthKey: PreferenceKey {
static var defaultValue: CGFloat = 0
static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
value = min(value, nextValue())
}
}

Solution

1. Step 1: Identify correct reduce logic for max

   To find maximum width, reduce must assign the max of current and next values.

2. Step 2: Verify function signature and logic

   Reduce must be static, take inout value, and use value = max(value, nextValue()).

3. Final Answer:

   struct MaxWidthKey: PreferenceKey { static var defaultValue: CGFloat = 0; static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) { value = max(value, nextValue()) } } -> Option C

4. Quick Check:

   Use max in reduce with inout value [OK]

Hint: Use max function and inout value in reduce [OK]

Common Mistakes:

• Using sum (+) instead of max
• Missing inout in reduce parameter
• Using min instead of max