useCallback optimization in React Native - UI Render Trace

Component - useCallback optimization

This React Native component shows a button and a counter. The useCallback hook is used to keep the button press handler function from being recreated on every render, which helps optimize performance by preventing unnecessary re-renders of child components.

Widget Tree

View
├── Text
└── Button

The root is a View container holding two children: a Text component that displays the current count, and a Button component that the user can press to increase the count.

Render Trace - 3 Steps

Step 1: View

Step 2: Text

Step 3: Button

State Change - Re-render

Trigger:User presses the 'Increase Count' button

Before

count = 0

→

After

count = 1

Re-renders:The entire component re-renders, but the increment function reference stays the same due to useCallback, preventing unnecessary re-renders of child components that depend on it.

UI Quiz - 3 Questions

Why is useCallback used for the increment function in this component?

A To make the function run faster

B To keep the function reference stable and avoid unnecessary re-renders

C To prevent the button from being displayed

D To change the count value directly

Key Insight

Using useCallback in React Native helps keep function references stable between renders. This is important when passing functions to child components, as it prevents unnecessary re-renders and improves app performance, especially in larger or more complex UI trees.