Performance
- React Native course
- Expert
- Lesson 45/47
- 6 min
Add performance profiling and optimization.
Performance profiling
Performance profiling measures where the app slows down. In React Native the React.Profiler component gives the render time of a subtree. With useMemo and useCallback you block needless recomputation and function recreation.
Example: <Profiler id="dashboard" onRender={(id, phase, actualTime) => console.log(id, phase, actualTime)}>...</Profiler>. This logs the time on every render. useMemo caches heavy computation: const sorted = useMemo(() => sort(metrics), [metrics]). This skips re-sorting unless metrics change. Do not optimize without measuring; find the bottleneck with Profiler first.
Using useMemo
useMemo caches a heavy computation. The second parameter is a dependency array; unless the dependencies change the computation is not redone.
Example: const max = useMemo(() => Math.max(...values), [values]). Here Math.max is not called again unless values change. This makes a difference on big arrays. But for small computations useMemo adds overhead; do not use it everywhere. Use it only where Profiler shows a slowdown. Over optimization makes code unreadable; measure, then optimize.
Practice Cache with useMemo
On top of the previous code add a useMemo call inside the App component. The dependency array is [metrics]. Inside it compute Object.keys(metrics) and assign to a metricKeys variable.
Starter code
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>Dashboard</Text>
</View>
);
}
const MetricCard = memo(function MetricCard({ label, value }) {
return <Text>{label}: {value}</Text>;
});
// Inside App compute metricKeys with useMemoSample solution
import React, { useState } from 'react';
import { Text, View } from 'react-native';
function App() {
const [metrics, setMetrics] = useState({});
return (
<View>
<Text>Dashboard</Text>
</View>
);
}
const MetricCard = memo(function MetricCard({ label, value }) {
return <Text>{label}: {value}</Text>;
});
function App() {
const [metrics, setMetrics] = useState({});
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>Dashboard</Text>
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each tool to its role
| Term | Meaning |
|---|---|
React.Profiler |
Render time |
useMemo |
Computation cache |
useCallback |
Function cache |
memo |
Component cache |
2 The useMemo dependency array
const metricKeys = useMemo(() => Object.keys(metrics), ____);const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);Explanation: [metrics] is the dependency array.
3 When should useMemo not be used?
useMemo(() => x + 1, [x])- When Profiler shows a slowdown
- For big arrays
- For heavy sorting
- For small computations Correct answer
Explanation: For small computations useMemo adds overhead.