State management comparison in React Native - UI Render Trace

Component - State management comparison

This UI component shows a simple counter app demonstrating two ways to manage state in React Native: using local component state with useState and using a global state with React Context. It helps learners see how state updates affect the UI and which parts re-render.

Widget Tree

App
├─ LocalStateCounter
│  ├─ View
│  │  ├─ Text (shows count)
│  │  └─ Button (increments count)
└─ GlobalStateCounter
   ├─ View
   │  ├─ Text (shows count from context)
   │  └─ Button (increments count in context)

The root component <code>App</code> contains two child components side by side: <code>LocalStateCounter</code> and <code>GlobalStateCounter</code>. Each has a <code>View</code> with a <code>Text</code> showing the current count and a <code>Button</code> to increase the count. The first uses local state, the second uses shared global state via React Context.

Render Trace - 5 Steps

Step 1: App

Step 2: LocalStateCounter

Step 3: GlobalStateCounter

Step 4: LocalStateCounter Button Press

Step 5: GlobalStateCounter Button Press

State Change - Re-render

Trigger:User presses either 'Increment Local' or 'Increment Global' button

Before

Local count and global count both 0

→

After

Either local count or global count increments by 1

Re-renders:Pressing local button re-renders only LocalStateCounter; pressing global button re-renders GlobalStateCounter and any other components consuming the context

UI Quiz - 3 Questions

When you press the 'Increment Local' button, which part of the UI updates?

A Both counters update

B Only the LocalStateCounter updates

C Only the GlobalStateCounter updates

D No counters update

Key Insight

Using local state with useState is simple and isolated to one component, good for small, independent parts. React Context provides a way to share state across many components, useful for global data like user info or theme. Understanding when to use each helps build efficient and maintainable apps.