@Binding for child communication in iOS Swift - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of @Binding in SwiftUI?

@Binding allows a child view to read and write a value owned by a parent view. It creates a two-way connection so changes in the child update the parent.

beginner

How do you declare a @Binding property in a child view?

Use @Binding var propertyName: Type inside the child view struct to declare a binding property.

beginner

How does a parent pass a binding to a child view?

The parent passes a binding by prefixing the state variable with a $ sign, like ChildView(propertyName: $parentState).

intermediate

What happens if a child view modifies a @Binding property?

Modifying a @Binding property updates the original source of truth in the parent view, causing the UI to refresh accordingly.

intermediate

Why is @Binding preferred over passing values directly for child communication?

@Binding keeps data in sync between parent and child without duplicating state, avoiding bugs and making UI reactive.

What symbol do you use to pass a binding from a parent to a child view?

A $

B &

C *

D #

In SwiftUI, the $ prefix is used to pass a binding to a child view.

Which property wrapper allows a child view to modify a parent's state?

A @State

B @ObservedObject

C @Binding

D @EnvironmentObject

@Binding creates a two-way connection so the child can modify the parent's state.

If a child view changes a @Binding property, what happens?

A Only the child view updates

B The parent view's state updates

C Nothing changes

D The app crashes

Changing a @Binding property updates the parent's source of truth and refreshes the UI.

Which of these is NOT true about @Binding?

A It duplicates the state in the child

B It requires a parent to own the state

C It keeps data in sync

D It allows two-way data flow

@Binding does NOT duplicate state; it references the parent's state directly.

Where do you declare the @Binding property in SwiftUI?

A In the parent view

B In the SceneDelegate

C In the AppDelegate

D In the child view

@Binding is declared in the child view to receive a reference to the parent's state.

Explain how @Binding enables communication between a parent and child view in SwiftUI.

Think about how changes in the child affect the parent.

Describe the steps to pass a state variable from a parent view to a child view using @Binding.

Focus on property wrappers and passing syntax.

Practice

1. What is the main purpose of using @Binding in SwiftUI child views?

easy

A. To prevent child views from accessing any parent data

B. To allow child views to read and modify a parent's state directly

C. To pass data only from child to parent without updates

D. To create a new independent state inside the child view

Solution

1. Step 1: Understand @Binding role

   @Binding creates a two-way connection allowing child views to read and write to a parent's state.

2. Step 2: Compare with other options

   Other options describe independent state or one-way data flow, which @Binding does not do.

3. Final Answer:

   To allow child views to read and modify a parent's state directly -> Option B

4. Quick Check:

   @Binding = two-way parent-child state link [OK]

Hint: Remember @Binding syncs child state with parent state [OK]

Common Mistakes:

• Confusing @Binding with @State creating independent state
• Thinking @Binding only passes data one-way
• Assuming @Binding prevents child from modifying data

2. Which of the following is the correct way to pass a binding from a parent to a child view in SwiftUI?

easy

A. ChildView($binding: $parentState)

B. ChildView(binding: parentState)

C. ChildView($binding: parentState)

D. ChildView(binding: $parentState)

Solution

1. Step 1: Identify correct binding syntax

   In SwiftUI, to pass a binding, use the $ prefix on the parent's @State variable.

2. Step 2: Validate options

   ChildView(binding: $parentState) correctly uses $parentState to pass a binding; others misuse $ or omit it.

3. Final Answer:

   ChildView(binding: $parentState) -> Option D

4. Quick Check:

   Use $ to pass binding from parent [OK]

Hint: Pass bindings with $ prefix before parent state [OK]

Common Mistakes:

• Forgetting the $ prefix when passing binding
• Using $ incorrectly in parameter name
• Passing state value instead of binding

3. Given this code snippet, what will be the output when the button is tapped?

struct ParentView: View {
  @State private var count = 0
  var body: some View {
    VStack {
      Text("Count: \(count)")
      ChildView(count: $count)
    }
  }
}

struct ChildView: View {
  @Binding var count: Int
  var body: some View {
    Button("Increment") {
      count += 1
    }
  }
}

medium

A. The app crashes due to missing @State in ChildView

B. The count text never changes after tapping the button

C. The count text updates and shows incremented value each tap

D. The button does not respond to taps

Solution

1. Step 1: Understand @Binding effect

   The ChildView uses @Binding to modify the parent's count state directly.

2. Step 2: Predict UI update

   When the button increments count, the parent's Text updates to show the new value.

3. Final Answer:

   The count text updates and shows incremented value each tap -> Option C

4. Quick Check:

   @Binding syncs changes to parent state [OK]

Hint: Child @Binding changes update parent UI automatically [OK]

Common Mistakes:

• Thinking @Binding requires @State in child too
• Assuming UI won't update without explicit refresh
• Confusing @Binding with simple value passing

4. Identify the error in this SwiftUI code using @Binding:

struct ParentView: View {
  @State private var text = "Hello"
  var body: some View {
    ChildView(text: text)
  }
}

struct ChildView: View {
  @Binding var text: String
  var body: some View {
    TextField("Enter", text: $text)
  }
}

medium

A. Parent passes text without $ prefix, so binding is missing

B. ChildView should use @State instead of @Binding

C. TextField cannot bind to @Binding variables

D. No error, code works correctly

Solution

1. Step 1: Check how binding is passed

   Parent passes text instead of $text, so ChildView receives a value, not a binding.

2. Step 2: Understand @Binding requirement

   ChildView expects a binding, so missing $ causes a type mismatch error.

3. Final Answer:

   Parent passes text without $ prefix, so binding is missing -> Option A

4. Quick Check:

   Pass binding with $ to match @Binding [OK]

Hint: Always use $ when passing @State to @Binding parameter [OK]

Common Mistakes:

• Omitting $ when passing binding
• Confusing @State and @Binding roles
• Assuming TextField works without binding

5. You want a child view to toggle a Boolean value in the parent and also perform a side effect when toggled. Which approach correctly uses @Binding and triggers the side effect in the parent?

struct ParentView: View {
  @State private var isOn = false

  var body: some View {
    ChildView(isOn: $isOn)
      .onChange(of: isOn) { newValue in
        print("Toggled to \(newValue)")
      }
  }
}

struct ChildView: View {
  @Binding var isOn: Bool

  var body: some View {
    Toggle("Switch", isOn: $isOn)
  }
}

hard

A. This code correctly uses @Binding and triggers side effect on toggle

B. Side effect won't trigger because onChange must be inside ChildView

C. Toggle should not use $isOn, just isOn without $

D. Parent must pass isOn without $ to ChildView

Solution

1. Step 1: Verify @Binding usage

   Parent passes binding with $isOn, ChildView uses @Binding and Toggle binds to $isOn correctly.

2. Step 2: Check side effect trigger

   Parent uses .onChange(of: isOn) to run code when isOn changes, which works as expected.

3. Final Answer:

   This code correctly uses @Binding and triggers side effect on toggle -> Option A

4. Quick Check:

   @Binding + onChange in parent = correct pattern [OK]

Hint: Use onChange in parent to react to @Binding changes [OK]

Common Mistakes:

• Placing onChange inside child instead of parent
• Passing state without $ causing binding errors
• Using Toggle without binding variable