14 hours ago
- The author discusses their long-term fascination with hot reloading and their repeated attempts to implement it for React.
- Hot reloading in React is currently usable but not seamless, with issues like unreliable class method replacement.
- A key insight is that hot reloading functions is easier than classes, and with Hooks, function components are fully featured, making this approach viable.
- The author proposes a sketch where a Babel plugin splits each function component into two parts, using a global variable to swap implementations while preserving state via consistent Hook call order.
- The article lists principles for evaluating hot reloading implementations: correctness (unobservable before edits, follows React rules), locality (minimizes re-execution, preserves parent/sibling state), and feedback (visual success/failure indicators, minimal noise).
- Key rules include ensuring element types match, supporting all React types like lazy/memo/forwardRef, and prioritizing state loss over incorrect behavior.
- The wishlist also covers preserving children's state, supporting custom Hooks, render props, and higher-order components, with fallback to state reset when assumptions change.
- Feedback mechanisms should include overlays for syntax errors, auto-dismissal on fix, and tools like // ! for forced remount or // inspect for debugging.
- The author aims to optimize for fast iteration, handle errors gracefully, and maintain trust by being predictable, while acknowledging JavaScript's limitations.