Summary - Performance engineering
- React Native course
- Expert
- Lesson 12/47
- 5 min
Combine Profiler, bottleneck and memory leak to write a perf report.
Summary - Performance engineering
Performance engineering has five steps: profiling (measure), React Profiler (per-component time), bottleneck (find it), list optimization (FlatList settings) and memory leak (cleanup).
The core rule: do not optimize without measuring. Perf Monitor shows JS and UI threads separately; React Profiler per component, FlatList virtualization the list, useEffect cleanup the memory. Keep the 16 ms target in mind.
Practice List item with useCallback
Wrap a ListItem component with React.memo. It should take a title prop and show a Text. Import React and default export it.
Starter code
import React from 'react';
import { Text } from 'react-native';
// Wrap ListItem with React.memo
export default ListItem;Sample solution
import React from 'react';
import { Text } from 'react-native';
const ListItem = React.memo(({ title }) => <Text>{title}</Text>);
export default ListItem;Practice Add getItemLayout
Add getItemLayout to a FlatList component. The item height should be 60. Use the signature (data, index) => ({ length: 60, offset: 60 * index, index }). Import FlatList from react-native.
Starter code
import React from 'react';
// Import FlatList and add getItemLayout
export default function App() {
return null;
}Sample solution
import React from 'react';
import { FlatList } from 'react-native';
export default function App() {
return (
<FlatList
data={[]}
keyExtractor={(item, i) => String(i)}
renderItem={() => null}
getItemLayout={(data, index) => ({ length: 60, offset: 60 * index, index })}
/>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which step is required before performance optimization?
- Rewrite all the code
- Add a new dependency
- Remove Expo
- Profile and measure Correct answer
Explanation: Do not optimize without measuring; profile first.
2 Match all the tools
| Term | Meaning |
|---|---|
Perf Monitor |
JS/UI thread |
React Profiler |
Component time |
FlatList |
Virtualization |
useEffect cleanup |
Memory cleanup |