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.