The Developer Menu and Fast Refresh

You change the colour of Sprout's "Watered" button and save. A second later the phone shows the new colour, and the plant you were looking at is still on screen. That is Fast Refresh. When it is not enough, the developer menu gives you the other controls.

The rule

Save to refresh; shake for the menu; reload when in doubt.

Fast Refresh is on by default. When you save a file:

• If the file only exports React components, React Native swaps in the new code and keeps the component's state. Your counter stays at 4.
• If you edit a file that exports something else too (a helper, a constant), the modules that import it re-run, and affected components can lose their state.
• If you save a syntax error, a red screen appears. Fix it and save again; the app recovers without a full reload.

To force a component to start fresh on every edit, add the comment // @refresh reset anywhere in its file.

The in-app developer menu appears only in development builds. Open it by:

The menu offers Reload (restart the JavaScript, losing all state), a way to open the debugger and DevTools, the element inspector (tap anything on screen to see its styles), the performance monitor (frame rates), and a switch for Fast Refresh. You can also reload by pressing r in the Expo terminal.

The shortcut

Pick the lightest tool that works: save, then reload, then restart Metro. Save for normal edits. Reload when state is stuck or confusing. Restart Metro with a clear cache only when code seems genuinely out of date.

The trap is expecting a save to reset state. Fast Refresh keeps it on purpose, so a stale value after an edit is not a bug in your code.

Drills

Answer fast — trust the rule.

Remember

• Save to refresh, shake for the menu, reload when in doubt.
• Lightest tool first: save, then reload, then restart Metro.
• Trap: Fast Refresh keeps state, so an old value after a save is expected.