In a React Native app where every save causes a full reload instead of a Fast Refresh, how do you find and fix the cause?

## The symptom A developer on a React Native app reports that **every save reloads the whole app**: the splash appears, navigation returns to the first screen, and the onboarding form they are styling is empty again. Fast Refresh is enabled in the Dev Menu. Nothing is broken in the usual sense — the runtime is choosing a full reload on purpose. The job is to find which rule it is following. ## How Metro's runtime decides When an update arrives, Metro's module runtime walks **up** the import graph from the edited module: 1. If a module on the path exports only React components, it is a **refresh boundary**: that path stops there. 2. Otherwise it keeps climbing through that module's importers. 3. If a path reaches a module with **no importers** — the entry file — without meeting a boundary, the runtime gives up and reloads (its internal reason is "No root boundary"). 4. If the walk finds a **dependency cycle**, it reloads ("Dependency cycle"). 5. After re-running a boundary, if its **exports changed shape** — an export added, removed or renamed, or a class turned into a function — the boundary is invalidated; its importers must all be boundaries too, or the runtime reloads ("Invalidated boundary", or "No longer a boundary" when the module now exports something that is not a component). ## A diagnosis checklist - **Who imports the file you are editing?** Look for any importer that is not a component module: a store, an API client, a navigation setup file, a background handler registered in the entry file. - **Does the file export more than components?** A component file that also exports a constant becomes a pass-through; if one of that constant's consumers leads to the entry file, every edit reloads. - **Is there an import cycle?** Two modules that import each other, often a screen and a helper, force a reload for edits along that cycle. - **Did the edit change the exports?** Adding or renaming an export in a component file invalidates the boundary; if its importers are not boundaries, the app reloads. That one is expected and goes away on the next edit. - **Does it happen for every file or one?** One file points at its import graph; every file points at something global — for instance the app root being imported by non-component code. ## Typical fixes | Cause | Fix | |---|---| | a component file also exports config used by setup code | move the config to its own module | | setup module imports a component file for a constant | import the constant from a shared module instead | | import cycle between a screen and a helper | extract the shared piece into a third module | | root component file exports extra helpers | keep `App.tsx` exporting only the component | ## Related signals that are not this - **"Fast Refresh disconnected. Reload app to reconnect."** means the app lost its connection to Metro; edits are not arriving at all, which is different from arriving and forcing a reload. - **State lost without a splash screen** is a remount, not a reload: a class component, changed Hooks, `// @refresh reset` or a render error. - **An edit that does not appear at all** can be stale bundler output; Metro's cache is a separate subject. ## Why it is worth fixing A full reload on every save throws away navigation position and form input, so every styling tweak on step 3 of the onboarding flow costs a trip through steps 1 and 2. Across a team this is a real productivity cost, and the fix is almost always a small change to module structure rather than to Fast Refresh.