New architecture
- React Native course
- Expert
- Lesson 44/47
- 6 min
Write components with the new architecture (JSI, Fabric).
What is the new architecture?
The new architecture is the JSI based structure of React Native. Instead of the old bridge the JS and native sides talk directly. This means less serialization and faster communication. Two core parts: Fabric (new renderer) and TurboModules (new native modules).
Fabric makes components render more efficiently. TurboModules make native modules load only when used (lazy). The new architecture is turned on with "newArchEnabled": true in app.json. This raises performance measurably; but some older libraries may not be compatible. Testing matters.
Writing a Fabric component
Writing a component in the new architecture is mostly the same as before. Basic components like View and Text render through Fabric automatically. For custom native components codegen is used.
Let us write a simple MetricCard component. It shows a label and a value. In the new architecture this component renders with less overhead. The code does not change; but Fabric works behind the scenes. If you wrap it with memo you also block needless re-renders. This builds the performance layer.
Practice Add the MetricCard component
On top of the previous code add a MetricCard component. It takes a label and a value prop. It returns <Text>{label}: {value}</Text>. Wrap it with memo.
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>
);
}
// Add the MetricCard component here (with memo)Sample 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>;
});Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 The new architecture setting
"newArchEnabled": ____"newArchEnabled": trueExplanation: newArchEnabled true turns the new architecture on.
2 What does the new architecture change?
bridge -> JSI- JS and native communication Correct answer
- Screen colors
- Font size
- Package name
Explanation: The new architecture speeds up JS-native communication.
3 Match each piece to its role
| Term | Meaning |
|---|---|
JSI |
Direct access |
Fabric |
New renderer |
TurboModules |
Lazy modules |
newArchEnabled |
Setting key |