Bilingual

My Wishlist for Hot Reloading — overreacted
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.
How Does setState Know What to Do? — overreacted
14 hours ago
- The `react` package only provides APIs for defining components, while the actual implementation (e.g., DOM updates) is handled by renderers like `react-dom`.
- `setState` in `React.Component` does not directly update the DOM; it delegates to a renderer-specific `updater` field set on the component instance.
- Hooks like `useState` use a similar pattern with a `dispatcher` object, which is set by the renderer before rendering a component.
- This separation allows React to work across different platforms (DOM, React Native, etc.) without changing component code, and it is a form of dependency injection.
How Are Function Components Different from Classes? — overreacted
14 hours ago
- Function components capture the props and state of a specific render via closures, preventing bugs from mutable `this` in class components.
- Class components read from `this.props` or `this.state`, which are mutable and can lead to incorrect values in asynchronous callbacks like timeouts.
- To fix class component bugs, developers often pass props explicitly or use closures inside `render`, but closures are naturally part of function components.
- The same principle applies to Hooks: function components capture state at render time, ensuring correct behavior in async handlers.
- For reading latest props or state, use `useRef` as an escape hatch, but it requires manual management and is not the default.
- Stale closures in Hooks are often due to incorrect assumptions about value stability; closures themselves are a feature that improves correctness.
- Performance differences between function and class components are negligible; the choice depends on the mental model and code clarity.

Hasty Briefsbeta

hooks

My Wishlist for Hot Reloading — overreacted

How Does setState Know What to Do? — overreacted

How Are Function Components Different from Classes? — overreacted