Props passing in React Native - UI Render Trace

Component - Props passing

This React Native component example shows how to pass data from a parent component to a child component using props. Props are like parameters you give to a child so it can display or use that data.

Widget Tree

App
├─ View (container)
│  ├─ Text (title)
│  └─ Greeting (child component)
│     └─ Text (message)

The main App component contains a View that holds a Text component for the title and a Greeting component. The Greeting component receives a name prop and renders a Text component showing a greeting message.

Render Trace - 5 Steps

Step 1: App

Step 2: View

Step 3: Text (title)

Step 4: Greeting

Step 5: Text (message)

State Change - Re-render

Trigger:Changing the name prop passed to Greeting from 'Alice' to 'Bob'

Before

Greeting component shows 'Hello, Alice!'

→

After

Greeting component shows 'Hello, Bob!'

Re-renders:Greeting component and its Text child re-render to update the displayed name

UI Quiz - 3 Questions

What does the Greeting component receive from its parent?

A A state variable called name

B A function to change the name

C A prop called name with a string value

D No data is passed to Greeting

Key Insight

Passing props is a simple way to send data from a parent to a child component in React Native. It helps keep components reusable and focused on displaying data they receive, like giving a friend a note with instructions.