Lifting state up in React Native - UI Render Trace

Component - Lifting state up

This UI component demonstrates lifting state up in React Native. It shows how two child components share and update a common piece of state managed by their parent. This helps keep data consistent and synchronized across the app.

Widget Tree

App
├── ParentComponent
│   ├── ChildInput
│   └── ChildDisplay

The root App renders a ParentComponent. Inside ParentComponent, there are two children: ChildInput, which lets the user type text, and ChildDisplay, which shows the typed text. The ParentComponent holds the shared state.

Render Trace - 5 Steps

Step 1: App

Step 2: ParentComponent

Step 3: ChildInput

Step 4: ChildDisplay

Step 5: User Interaction

State Change - Re-render

Trigger:User types in ChildInput's text box

Before

text = ''

→

After

text = 'Hello'

Re-renders:ParentComponent and both ChildInput and ChildDisplay re-render with updated text

UI Quiz - 3 Questions

Where is the shared state stored in this example?

A In ChildDisplay only

B In ChildInput only

C In the ParentComponent

D In the App component directly

Key Insight

Lifting state up means moving shared data to the closest common parent. This keeps the app data consistent and lets multiple components stay in sync easily. It is a key pattern in React Native for managing state cleanly.