Hot Reload vs Hot Restart

Hot Reload vs Hot Restart

About

  • Hot Reload: Inject updated code while preserving app state.
  • Hot Restart: Fully restart app with new code.
  • Critical for Flutter developer workflow.
  • Different use cases and performance characteristics.

Main Topics

  1. Hot Reload

    • Definition: Incremental code injection.
    • Example:
      // Change widget code  preserve form input
  2. Hot Restart

    • Definition: Full app restart.
    • Example:
      // Change app initialization  requires restart
  3. State Preservation

    • Definition: What gets preserved.
    • Example:
      // Hot Reload keeps:
      // - Form data
      // - Navigation stack
  4. Performance

    • Definition: Time comparison.
    • Example:
      // Hot Reload: ~1s
      // Hot Restart: ~5-10s
  5. When to Use Each

    • Definition: Appropriate scenarios.
    • Example:
      // Use Hot Reload for:
      // - UI tweaks
      // - Style changes

How to Use

  • Hot Reload: Ctrl+\ (VS Code)
  • Hot Restart: Ctrl+Shift+\
  • Debugging: Use when state matters
  • Initialization: Requires restart

How It Works

  1. Hot Reload:

    • Dart VM updates classes
    • Widget tree rebuilt
    • State preserved
  2. Hot Restart:

    • Full app reboot
    • Fresh state
    • Re-runs main()

Example Workflow:

// 1. Edit widget style → Hot Reload
// 2. Change global variable  Hot Restart

Conclusion

Hot Reload and Hot Restart are complementary tools in Flutter’s development workflow. Hot Reload enables rapid UI iteration while preserving application state, while Hot Restart provides a clean slate when fundamental changes require complete application reinitialization, together significantly boosting developer productivity.