Summary - Performance engineering

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.

Exercise 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.

Show example solution

import React from 'react';
import { Text } from 'react-native';

const ListItem = React.memo(({ title }) => <Text>{title}</Text>);

export default ListItem;

Exercise 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.

Show example 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 })}
    />
  );
}

Test yourself

Which step is required before performance optimization?
- Rewrite all the code
- Add a new dependency
- Remove Expo
- Profile and measure
Show answer

Profile and measure — Do not optimize without measuring; profile first.
Match all the tools

Perf Monitor

JS/UI thread
React Profiler

Component time
FlatList

Virtualization
useEffect cleanup

Memory cleanup

Next lesson: Feature-based

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies