Fast Refresh and Metro

Metro (0.84.5 in this project) bundles in three stages. Resolution builds the graph of modules imported from the entry file, preferring platform files such as Button.android.js; transformation runs each module through Babel 41,624 (JSX, TypeScript, modern syntax); serialization joins them into one bundle. Android Bundled 2205ms index.js (696 modules) in Android Emulator is that pipeline finishing. Transformed modules are cached, so a save re-transforms only the files you changed.

Fast Refresh builds on this: Metro keeps a WebSocket open to the app, sends the changed modules on save, and React 7,897 swaps in the new component code while keeping the component tree and its state. Try it with a counter:

import { useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
export default function App() {
  const [count, setCount] = useState(0);
  return (
    <View style={styles.container}>
      <Text style={styles.label}>Books in cart: {count}</Text>
      <Pressable style={styles.button} onPress={() => setCount(count + 1)}>
        <Text style={styles.buttonText}>Add to cart</Text>
      </Pressable>
    </View>
  );
}
const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  label: { fontSize: 22, marginBottom: 16 },
  button: { backgroundColor: '#1565c0', padding: 12, borderRadius: 6 },
  buttonText: { color: '#fff', fontSize: 16 },
});

Tap three times, then make the label 28 dp, bold and green and the button #ef6c00, and save. The screen changes without a reload, and the count is still 3:

A file exporting only components is patched in place; one exporting other values re-runs with its importers; an edit outside the React tree forces a full reload. useState and useRef keep their values, effects and memos re-run, class components remount, and // @refresh reset forces a remount on every save. A syntax error shows a red overlay that disappears when you fix it. In the terminal, npx expo start takes a (open on Android), r (reload), m (dev menu) and j (React Native DevTools 36,878 , React Native DevTools).