@Binding for child communication in iOS Swift - UI Render Trace

Component - @Binding for child communication

This UI component shows how a child view can communicate changes back to its parent using @Binding in SwiftUI. The parent holds the source of truth, and the child updates it through the binding.

Widget Tree

VStack
├── Text
└── Toggle

The root layout is a vertical stack (VStack) containing two children: a Text view that shows the current toggle state, and a Toggle switch that the user can tap to change the state.

Render Trace - 3 Steps

Step 1: VStack

Step 2: Text

Step 3: Toggle

State Change - Re-render

Trigger:User taps the Toggle switch to turn it ON

Before

isOn = false

→

After

isOn = true

Re-renders:Entire VStack re-renders, updating the Text to "Toggle is ON" and the Toggle switch to ON

UI Quiz - 3 Questions

What does the @Binding property in the child view do?

A Prevents the child from changing any data

B Creates a new independent state in the child

C Allows the child to read and write the parent's state

D Copies the parent's state but does not update it

Key Insight

Using @Binding in SwiftUI lets child views directly update state owned by their parent. This keeps data flow clear and UI in sync, just like a shared remote control that both parent and child can use to change the TV channel.