Default props in React Native - UI Render Trace

Component - Default props

This React Native component shows how default props work. If a prop is not given, the component uses a default value to display text. This helps keep the UI consistent and avoids errors.

Widget Tree

App
└── Greeting
    └── Text

The App component renders the Greeting component. Greeting contains a Text component that displays a message. If no name prop is passed to Greeting, it uses a default name.

Render Trace - 3 Steps

Step 1: App

Step 2: Greeting

Step 3: Text

State Change - Re-render

Trigger:App passes a new name prop to Greeting

Before

Greeting uses default prop 'Guest'

→

After

Greeting uses passed prop 'Alice'

Re-renders:Greeting and its child Text re-render with new prop

UI Quiz - 3 Questions

What text is shown if Greeting is rendered without a name prop?

A "Hello, Guest!"

B "Hello, undefined!"

C "Hello, !"

D No text is shown

Key Insight

Using default props in React Native components ensures the UI always has meaningful data to display, even if some props are missing. This prevents blank or broken screens and improves user experience.