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.