Callback props in React Native - UI Render Trace

Component - Callback props

This React Native component shows how a parent passes a function (callback) to a child. The child calls this function when a button is pressed. This lets the parent know about the child's action and update its own state.

Widget Tree

App
├─ View (container)
│  ├─ Text (display message)
│  └─ ChildButton (custom component)
│     └─ Button (pressable)

The root App component contains a View that holds a Text and a ChildButton component. ChildButton renders a Button. When the Button is pressed, ChildButton calls the callback function passed from App.

Render Trace - 3 Steps

Step 1: App

Step 2: ChildButton

Step 3: Button

State Change - Re-render

Trigger:User taps the 'Click me' button

Before

message = 'Press the button'

→

After

message = 'Button was clicked!'

Re-renders:App component and its children re-render to update the displayed message

UI Quiz - 3 Questions

What happens when the button inside ChildButton is pressed?

A The callback function passed from App is called

B ChildButton changes its own state

C The button label changes automatically

D Nothing happens

Key Insight

Using callback props in React Native lets parent components control state changes triggered by child components. This pattern keeps state in one place and allows clear communication from child to parent.