Why performance affects user retention in React Native - UI Rendering Impact

Component - Why performance affects user retention

This component shows a simple app screen with a loading spinner and a message. It demonstrates how slow performance (loading delay) can affect user experience and retention. Users expect fast responses; delays can cause frustration and app abandonment.

Widget Tree

View
├── ActivityIndicator
└── Text

The root View holds two children stacked vertically: an ActivityIndicator (spinner) and a Text message below it. This layout centers the spinner and message on the screen.

Render Trace - 3 Steps

Step 1: View

Step 2: ActivityIndicator

Step 3: Text

State Change - Re-render

Trigger:Loading completes after a delay

Before

Loading is true; spinner and message are visible

→

After

Loading is false; spinner and message are removed, main content shown

Re-renders:The entire View subtree containing ActivityIndicator and Text re-renders to show new content

UI Quiz - 3 Questions

What does the ActivityIndicator represent in this UI?

A A loading spinner showing the app is busy

B A button to start loading

C An image icon

D A text input field

Key Insight

Showing clear loading indicators and messages helps users understand the app is working. Fast performance keeps users happy and engaged. Slow or unresponsive apps risk losing users because they get frustrated waiting.