React Native performance optimization is as much about understanding the runtime architecture as it is about writing efficient code. This guide covers the performance characteristics of React Native's rendering pipeline, bridge communication, and provides TypeScript patterns that produce measurably faster applications.
Understanding the React Native Runtime
React Native operates across three threads:
- JS Thread: Runs your TypeScript/JavaScript code, React reconciliation, and business logic
- UI Thread (Main Thread): Handles native view rendering, touch events, and animations
- Shadow Thread: Calculates layout using Yoga (Flexbox engine)
Performance problems arise when any thread is blocked or when communication between threads creates bottlenecks.
typescript
1// Measure JS thread frame drops
2import { PerformanceObserver } from 'react-native-performance';
3
4const observer = new PerformanceObserver((list) => {
5 for (const entry of list.getEntries()) {
6 if (entry.name === 'reactNativeFrameDrop') {
7 console.warn(`Frame drop detected: ${entry.duration}ms`);
8 }
9 }
10});
11observer.observe({ type: 'measure' });
12
Component Performance Patterns
Memoization Strategy
Not every component needs memoization. Apply it strategically:
typescript
1// DO memoize: List items (rendered many times, receive stable props)
2const TransactionItem = React.memo<TransactionItemProps>(
3 ({ transaction, onPress }) => {
4 const handlePress = useCallback(() => onPress(transaction.id), [transaction.id, onPress]);
5
6 return (
7 <Pressable onPress={handlePress} style={styles.item}>
8 <FastImage source={{ uri: transaction.icon }} style={styles.icon} />
9 <View style={styles.details}>
10 <Text style={styles.name}>{transaction.name}</Text>
11 <Text style={styles.amount}>{transaction.formattedAmount}</Text>
12 </View>
13 </Pressable>
14 );
15 },
16 (prev, next) => prev.transaction.id === next.transaction.id,
17);
18
19// DON'T memoize: Root-level screens (rendered once, always receive new props)
20function DashboardScreen() {
21 // This component renders once. Memo adds overhead without benefit.
22 return (
23 <ScrollView>
24 <BalanceCard />
25 <RecentTransactions />
26 <QuickActions />
27 </ScrollView>
28 );
29}
30
Expensive Computations with useMemo
typescript
1function AnalyticsScreen({ transactions }: Props) {
2 // Expensive: categorize and aggregate 1000+ transactions
3 const categoryTotals = useMemo(() => {
4 const totals = new Map<string, number>();
5 for (const tx of transactions) {
6 const current = totals.get(tx.category) ?? 0;
7 totals.set(tx.category, current + tx.amount);
8 }
9 return Array.from(totals.entries())
10 .map(([category, total]) => ({ category, total }))
11 .sort((a, b) => b.total - a.total);
12 }, [transactions]);
13
14 return <CategoryChart data={categoryTotals} />;
15}
16
List Rendering
FlashList Configuration
typescript
1import { FlashList, ListRenderItem } from '@shopify/flash-list';
2
3interface Transaction {
4 id: string;
5 type: 'credit' | 'debit' | 'transfer';
6 amount: number;
7 merchant: string;
8 date: string;
9}
10
11function TransactionList({ transactions }: { transactions: Transaction[] }) {
12 const renderItem: ListRenderItem<Transaction> = useCallback(
13 ({ item }) => <TransactionItem transaction={item} onPress={handlePress} />,
14 [handlePress],
15 );
16
17 return (
18 <FlashList
19 data={transactions}
20 renderItem={renderItem}
21 estimatedItemSize={72}
22 keyExtractor={keyExtractor}
23 getItemType={getItemType}
24 drawDistance={500} // Pre-render 500px ahead of viewport
25 />
26 );
27}
28
29// Extract as module-level functions for referential stability
30const keyExtractor = (item: Transaction) => item.id;
31const getItemType = (item: Transaction) => item.type;
32
Sticky Headers with Type Safety
typescript
1interface StickySection<T> {
2 title: string;
3 data: T[];
4}
5
6function SectionedList<T extends { id: string }>({
7 sections,
8 renderItem,
9}: {
10 sections: StickySection<T>[];
11 renderItem: ListRenderItem<T>;
12}) {
13 const flatData = useMemo(() => {
14 const items: Array<T | { type: 'header'; title: string }> = [];
15 const stickyIndices: number[] = [];
16
17 for (const section of sections) {
18 stickyIndices.push(items.length);
19 items.push({ type: 'header', title: section.title } as any);
20 items.push(...section.data);
21 }
22
23 return { items, stickyIndices };
24 }, [sections]);
25
26 return (
27 <FlashList
28 data={flatData.items}
29 renderItem={({ item }) => {
30 if ('type' in item && item.type === 'header') {
31 return <SectionHeader title={(item as any).title} />;
32 }
33 return renderItem({ item: item as T } as any);
34 }}
35 stickyHeaderIndices={flatData.stickyIndices}
36 estimatedItemSize={72}
37 getItemType={(item) => ('type' in item ? 'header' : 'item')}
38 />
39 );
40}
41
Need a second opinion on your mobile/frontend architecture?
I run free 30-minute strategy calls for engineering teams tackling this exact problem.
Book a Free CallAnimation Patterns
Reanimated Gesture Handler Integration
typescript
1import Animated, {
2 useSharedValue,
3 useAnimatedStyle,
4 withSpring,
5 withTiming,
6 runOnJS,
7} from 'react-native-reanimated';
8import { Gesture, GestureDetector } from 'react-native-gesture-handler';
9
10function SwipeableRow({ onDelete, children }: Props) {
11 const translateX = useSharedValue(0);
12 const deleteThreshold = -100;
13
14 const panGesture = Gesture.Pan()
15 .onUpdate((event) => {
16 translateX.value = Math.min(0, event.translationX);
17 })
18 .onEnd((event) => {
19 if (translateX.value < deleteThreshold) {
20 translateX.value = withTiming(-300, { duration: 200 });
21 runOnJS(onDelete)();
22 } else {
23 translateX.value = withSpring(0);
24 }
25 });
26
27 const animatedStyle = useAnimatedStyle(() => ({
28 transform: [{ translateX: translateX.value }],
29 }));
30
31 return (
32 <GestureDetector gesture={panGesture}>
33 <Animated.View style={animatedStyle}>{children}</Animated.View>
34 </GestureDetector>
35 );
36}
37
Skeleton Loading (UI thread animation)
typescript
1import Animated, {
2 useSharedValue,
3 useAnimatedStyle,
4 withRepeat,
5 withTiming,
6 Easing,
7} from 'react-native-reanimated';
8
9function SkeletonLoader({ width, height }: { width: number; height: number }) {
10 const opacity = useSharedValue(0.3);
11
12 useEffect(() => {
13 opacity.value = withRepeat(
14 withTiming(0.7, { duration: 800, easing: Easing.ease }),
15 -1,
16 true,
17 );
18 }, []);
19
20 const animatedStyle = useAnimatedStyle(() => ({ opacity: opacity.value }));
21
22 return (
23 <Animated.View
24 style={[{ width, height, backgroundColor: '#e0e0e0', borderRadius: 4 }, animatedStyle]}
25 />
26 );
27}
28
Network Layer Optimization
React Query with TypeScript
typescript
1import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
2
3interface Transaction {
4 id: string;
5 amount: number;
6 merchant: string;
7 date: string;
8 category: string;
9}
10
11const transactionKeys = {
12 all: ['transactions'] as const,
13 list: (filters: TransactionFilters) => [...transactionKeys.all, 'list', filters] as const,
14 detail: (id: string) => [...transactionKeys.all, 'detail', id] as const,
15};
16
17function useTransactions(filters: TransactionFilters) {
18 return useQuery({
19 queryKey: transactionKeys.list(filters),
20 queryFn: () => api.getTransactions(filters),
21 staleTime: 2 * 60 * 1000, // 2 minutes
22 select: (data) => data.map(enrichTransaction), // Transform at query level, not render level
23 });
24}
25
26function useDeleteTransaction() {
27 const queryClient = useQueryClient();
28
29 return useMutation({
30 mutationFn: (id: string) => api.deleteTransaction(id),
31 onMutate: async (id) => {
32 // Optimistic update
33 await queryClient.cancelQueries({ queryKey: transactionKeys.all });
34 const previous = queryClient.getQueryData<Transaction[]>(transactionKeys.all);
35 queryClient.setQueryData<Transaction[]>(
36 transactionKeys.all,
37 (old) => old?.filter((t) => t.id !== id) ?? [],
38 );
39 return { previous };
40 },
41 onError: (_, __, context) => {
42 queryClient.setQueryData(transactionKeys.all, context?.previous);
43 },
44 onSettled: () => {
45 queryClient.invalidateQueries({ queryKey: transactionKeys.all });
46 },
47 });
48}
49
Performance Monitoring
typescript
1import { useEffect, useRef } from 'react';
2
3function useRenderTimer(componentName: string) {
4 const renderCount = useRef(0);
5 const lastRender = useRef(Date.now());
6
7 useEffect(() => {
8 renderCount.current++;
9 const now = Date.now();
10 const sinceLastRender = now - lastRender.current;
11
12 if (renderCount.current > 1 && sinceLastRender < 16) {
13 console.warn(
14 `${componentName}: re-rendered ${sinceLastRender}ms after last render (render #${renderCount.current})`,
15 );
16 }
17
18 lastRender.current = now;
19 });
20}
21
22// Usage in development
23function TransactionList(props: Props) {
24 if (__DEV__) useRenderTimer('TransactionList');
25 // ...
26}
27
Conclusion
React Native performance in TypeScript is primarily about understanding which operations run on which thread and minimizing cross-thread communication. Memoization prevents unnecessary JS thread work. Reanimated keeps animations on the UI thread. FlashList reduces memory pressure through cell recycling. React Query deduplicates network requests and provides optimistic updates.
The TypeScript-specific advantage is compile-time enforcement of performance patterns. Typed render props prevent accidentally passing unstable references. Typed query keys ensure cache invalidation is correct. Typed animation values catch unit mismatches before they cause visual glitches.