React.memo and useMemo in React Native - UI Render Trace

Component - React.memo and useMemo

This component demonstrates how React.memo and useMemo help optimize React Native apps by preventing unnecessary re-renders and expensive recalculations. React.memo wraps a component to skip re-rendering if props don't change. useMemo caches a computed value until dependencies change.

Widget Tree

App
├─ View (container)
│  ├─ MemoizedCounter (React.memo)
│  │  └─ Text (displays count)
│  ├─ Button (Increment)
│  └─ Text (Expensive calculation result)

The root App component contains a View as a container. Inside, there is a MemoizedCounter component wrapped with React.memo that shows the current count. Below it is a Button to increment the count. Finally, a Text component displays the result of an expensive calculation memoized with useMemo.

Render Trace - 4 Steps

Step 1: App

Step 2: MemoizedCounter

Step 3: Button

Step 4: Text (Expensive calculation)

State Change - Re-render

Trigger:User taps Increment button

Before

count = 0

→

After

count = 1

Re-renders:App and children re-render; MemoizedCounter re-renders because count prop changed; memoized calculation recomputes for count 1

UI Quiz - 3 Questions

What does React.memo do in this component?

A Handles button press events

B Caches the result of the expensive calculation

C Prevents MemoizedCounter from re-rendering if count prop is unchanged

D Creates the initial state

Key Insight

Using React.memo and useMemo together helps React Native apps run smoothly by avoiding unnecessary work. React.memo skips re-rendering components when props don't change, saving processing time. useMemo caches expensive calculations so they only run when needed. This keeps the UI responsive and efficient.