useReducer hook in React Native - UI Render Trace

Component - useReducer hook

This component uses the useReducer hook to manage state in a simple counter app. It shows how to update state based on actions, similar to how a cashier counts money by adding or subtracting bills.

Widget Tree

View
├─ Text (shows count)
└─ View (buttons container)
   ├─ Button (Increment)
   └─ Button (Decrement)

The root View holds a Text component that displays the current count. Below it, another View contains two Buttons side by side: one to increase and one to decrease the count.

Render Trace - 5 Steps

Step 1: View

Step 2: Text

Step 3: View (buttons container)

Step 4: Button (Increment)

Step 5: Button (Decrement)

State Change - Re-render

Trigger:User taps 'Increment' or 'Decrement' button

Before

count = 0 (initially)

→

After

count = count + 1 if 'increment', or count - 1 if 'decrement'

Re-renders:Entire component re-renders to update the displayed count in the Text component

UI Quiz - 3 Questions

What happens when the 'Increment' button is pressed?

A The count number increases by 1

B The count number decreases by 1

C The app closes

D Nothing changes

Key Insight

Using useReducer helps organize state updates clearly by defining how each action changes the state. This is useful when state changes depend on different events, making the code easier to read and maintain.