Bottleneck

Learn performance bottleneck detection.

Bottleneck

A bottleneck is the single point that slows the app down. Common React Native causes: heavy FlatList, unnecessary re-renders, synchronous native calls and large image decoding.

Look at the profile output and find where most time is spent. Optimizations are not all in one place; fix the biggest bottleneck, measure again, move to the next.

Reducing re-renders

React re-renders a component when state or props change. To cut unnecessary re-renders you use React.memo, useMemo and useCallback. Stable references speed up props comparison.

If each item in a list is wrapped in memo, only the changed item re-renders. keyExtractor must also be set correctly; otherwise the whole list re-renders.

Exercise Stable function with useCallback

Wrap a handlePress function with useCallback. The dependency array should be empty. The function should be () => console.log('pressed').

Show example solution

import React, { useCallback } from 'react';

const handlePress = useCallback(() => console.log('pressed'), []);

export default function App() {
  return null;
}

Test yourself

Match the bottleneck causes

FlatList

Heavy list
Re-render

Unnecessary draw
Large image

Decode cost
Native call

Sync block
Which is used to reduce unnecessary re-renders?
- Platform.OS
- AsyncStorage
- FlatList
- React.memo
Show answer

Platform.OS — React.memo skips re-render if props did not change.

Write the useCallback import

import { useState, ____ } from 'react';

Show answer

import { useState, useCallback } from 'react';

Next lesson: List optimization

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies