Bottleneck
- React Native course
- Expert
- Lesson 9/47
- 5 min
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.
Practice Stable function with useCallback
Wrap a handlePress function with useCallback. The dependency array should be empty. The function should be () => console.log('pressed').
Starter code
import React, { useCallback } from 'react';
// Define handlePress with useCallback
export default function App() {
return null;
}Sample solution
import React, { useCallback } from 'react';
const handlePress = useCallback(() => console.log('pressed'), []);
export default function App() {
return null;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match the bottleneck causes
| Term | Meaning |
|---|---|
FlatList |
Heavy list |
Re-render |
Unnecessary draw |
Large image |
Decode cost |
Native call |
Sync block |
2 Which is used to reduce unnecessary re-renders?
- Platform.OS Correct answer
- AsyncStorage
- FlatList
- React.memo
Explanation: React.memo skips re-render if props did not change.
3 Write the useCallback import
import { useState, ____ } from 'react';import { useState, useCallback } from 'react';Explanation: useCallback stabilizes a function reference.