Putting it together
- React Native course
- Expert
- Lesson 47/47
- 6 min
Combine all expert topics into a working mini app.
Putting all expert topics together
In the last lesson we wire all pieces: new architecture (Fabric), performance (useMemo) and monorepo (shared package). App computes metricKeys with useMemo; draws each key with MetricCard; the value is formatted with formatMetric.
This union is the skeleton of an expert React Native app. The new architecture gives fast rendering, useMemo gives caching, monorepo gives code sharing. Each layer was built in its own lesson; now they all work together. In the next step you will turn metricKeys into a list of MetricCards with map.
Practice Draw a list of MetricCards
On top of the previous code add a metricKeys.map call to App's return. For each key return <MetricCard label={key} value={formatMetric(metrics[key])} />. Add a key prop too.
Starter code
import { formatMetric } from '@myorg/utils';
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>
);
}
// In App's return draw a MetricCard list with metricKeys.mapSample solution
import { formatMetric } from '@myorg/utils';
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>
);
}
function App() {
const [metrics, setMetrics] = useState({ cpu: 42, mem: 60 });
const metricKeys = useMemo(() => Object.keys(metrics), [metrics]);
return (
<View>
<Text>Dashboard</Text>
{metricKeys.map((key) => (
<MetricCard key={key} label={key} value={formatMetric(metrics[key])} />
))}
</View>
);
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 How is metricKeys computed?
const metricKeys = ?(() => Object.keys(metrics), [metrics]);- useState
- useMemo Correct answer
- useEffect
- useRef
Explanation: It is cached with useMemo.
2 Match each layer to its role
| Term | Meaning |
|---|---|
Fabric |
Fast render |
useMemo |
Cache |
formatMetric |
Formatting |
MetricCard |
Component |
3 The map call
{____.map((key) => <MetricCard key={key} label={key} />)}{metricKeys.map((key) => <MetricCard key={key} label={key} />)}Explanation: metricKeys.map draws the list.
4 How was the monorepo used in this project?
import { formatMetric } from '@myorg/utils';- With a notification
- With an animation
- With a theme
- With a shared package Correct answer
Explanation: @myorg/utils is the shared monorepo package.