Performance

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.

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

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

Test yourself

Match each tool to its role

React.Profiler

Render time
useMemo

Computation cache
useCallback

Function cache
memo

Component cache

The useMemo dependency array

const metricKeys = useMemo(() => Object.keys(metrics), ____);

Show answer

const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);

When should useMemo not be used?
```
useMemo(() => x + 1, [x])
```
- When Profiler shows a slowdown
- For big arrays
- For heavy sorting
- For small computations
Show answer

For small computations — For small computations useMemo adds overhead.

Next lesson: Monorepo

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies