react

Bilingual

Making Referential Stability a Type
2 months ago
- Introduces a phantom brand type `Stable<T>` to encode referential stability into TypeScript types, preventing accidental re-creation of objects, arrays, and functions.
- Provides a separate import `stableref/react` with stricter hook signatures that fail at the dependency list when stability is not proven, rather than falling back to permissive types.
- React guarantees stability for state, setState, and ref objects; these are automatically branded as `Stable`.
- Context values can be enforced as stable using `createStableContext`, ensuring memoization boundaries are honored.
- Preact has a parallel entry point `stableref/preact` with the same strict dependency checking.
- Limitations include explicit casts (`as Stable`) and the React Compiler, but the type-based approach complements automated memoization.
- Type errors are designed as actionable guardrails with descriptive messages, aiding both human developers and AI coding agents.
- The broader vision extends beyond memoization to carry proof-carrying properties across component boundaries and hooks.
Why Do We Write super(props)? — overreacted
2 months ago
- In JavaScript, calling `super()` is required in a class constructor before using `this`; React class components inherit this rule.
- Passing `props` to `super(props)` is not strictly necessary because React assigns `this.props` after the constructor runs, but it ensures `this.props` is available during the constructor.
- The `super(props)` convention prevents confusion and bugs, especially when methods are called from within the constructor.
- React's constructor also receives `context` as a second argument, but it's less commonly used.
- Class fields proposal and Hooks eliminate the need for explicit `super()` calls in many cases.
How Does React Tell a Class from a Function? — overreacted
2 months ago
- React treats components differently based on whether they are functions or classes, needing to call functions directly or instantiate classes with `new` and call `render`.
- The `new` operator in JavaScript creates an object for class constructors, but using it with arrow functions or non-class functions causes errors or unwanted behavior.
- React cannot simply use `new` for all components because it breaks arrow functions and prevents support for primitive return types.
- React distinguishes classes from functions by checking for a special `isReactComponent` flag on the prototype, which is added to `React.Component`.
- Using `instanceof` to check class inheritance is unreliable due to issues like multiple React copies and missing static properties in some transpiled code.
- The `isReactComponent` flag on `React.Component.prototype` provides a practical and reliable way for React to determine component type.
Why Do React Elements Have a $$typeof Property? — overreacted
2 months ago
- React elements are plain objects created by JSX (a function call) that include type, props, key, ref, and a $$typeof property.
- The $$typeof property with a Symbol value is a security feature in React 0.14+ to prevent XSS attacks from malicious JSON objects.
- If the server has a security hole returning JSON instead of text, the $$typeof Symbol check rejects invalid elements because Symbols cannot be included in JSON.
- In browsers without Symbol support, $$typeof is set to the number 0xeac7 (which resembles 'React') for consistency, though with less protection.
My Wishlist for Hot Reloading — overreacted
2 months 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
2 months 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
2 months 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.
Writing Resilient Components — overreacted
2 months ago
- Style guides and linting can be distracting; focus on component design principles for resilience.
- Principle 1: Don't stop data flow — avoid copying props into state, ensure side effects respect prop/state changes, and use hooks like useEffect with explicit dependencies.
- Principle 2: Always be ready to render — avoid relying on legacy lifecycle methods like componentWillReceiveProps; components should handle re-renders gracefully.
- Principle 3: No component is a singleton — design components to work correctly when multiple instances are mounted (e.g., avoid global state cleanup on unmount).
- Principle 4: Keep local state isolated — distinguish between truly local state (e.g., UI interactions) and global state (e.g., server data); don't hoist local state unnecessarily.
- Use Prettier for formatting and lint for catching bugs, not for enforcing arbitrary stylistic rules.
Algebraic Effects for the Rest of Us — overreacted
2 months ago
- Algebraic effects allow 'resumable exceptions' using 'perform' and 'handle' instead of 'throw' and 'catch'.
- They enable asynchronous code without requiring intermediate functions to be marked async or generator, avoiding 'function color'.
- Effect handlers separate the 'what' (logic) from the 'how' (implementation), making code more modular and testable.
- In React, Suspense and Hooks approximate algebraic effects using throwing Promises and mutable dispatcher fields.
- Algebraic effects are a research feature, not yet production-ready, but offer a mental model for decoupling concerns.
How Does the Development Mode Work? — overreacted
2 months ago
- Development mode includes warnings that help detect bugs but increases bundle size and slows performance.
- The __DEV__ constant is replaced at build time, and minifiers remove dead code in production.
- The process.env.NODE_ENV pattern is substituted with a string literal by bundlers like webpack.
- Dead code elimination requires static conditions; complex expressions or module boundaries may not work.
- Modern tools like Create React App separate development and production builds into distinct commands.
- Development warnings should be on by default to catch bugs early, especially for new users.
- The convention of process.env.NODE_ENV originated from Node.js and was adopted by browserify and React.
- React now precompiles separate bundles for development and production to avoid runtime checks.
- The article advocates for modes as a first-class concept in JavaScript environments.
My Decade in Review — overreacted
2 months ago
- Started the decade as a 17-year-old college freshman in Russia, dropped out after losing motivation, and moved into software development.
- First job at an outsourcing company earning $18k/year; later quit to learn web development through a free volunteer program.
- Rejected from a dream job at a Russian social media company, then hired by Roman Mazurenko to build an iPad app (Stampsy) in Moscow.
- Pivoted to web development with React in 2014, creating open-source tools like hot module replacement and Redux.
- Gave first conference talk on React with time-travel debugging at ReactEurope in 2015, leading to a job offer from Facebook's London office.
- Relocated to London in late 2015, faced challenges with language, bureaucracy, and taxes; joined React Core team remotely.
- Co-created Create React App in 2016 and contributed to React 16 rewrite; built a career explaining and building UI tools.
- Personal milestones: marriage, death of friend Roman Mazurenko, and growth in public speaking and side projects.
- Ended the decade with a focus on teaching and building, acknowledging privilege and the impact of open source contributions.
Before You memo() — overreacted
2 months ago
- Before applying memo() or useMemo(), first try to split components that change from those that don't.
- Solution 1: Move state down by extracting the part of the UI that depends on the state into its own component.
- Solution 2: Lift content up by passing unchanged parts (e.g., as children prop) to the state-dependent component to prevent re-rendering.
- These techniques improve code clarity and data flow, with performance as a bonus.
- They complement memo() and useMemo()—use the Profiler and memo() only when these simpler methods aren't enough.
The Two Reacts — overreacted
2 months ago
- React components can run on either the client (user's device) or the server (creator's device), each with distinct advantages.
- Client-side components enable instant interactivity (e.g., counter) by using local state and avoiding network delays, following UI = f(state).
- Server-side components can access local data sources (e.g., file system) and preprocess data before sending only the needed UI, following UI = f(data).
- The two paradigms are seemingly incompatible: client needs state and low latency, server needs data and centralized processing.
- Real applications often require both patterns, prompting the need to split components across environments while preserving React's composability.
What Does "use client" Do? — overreacted
2 months ago
- 'use client' and 'use server' directives abstract over sending code to the client (as script) and communicating back (as fetch), making the client/server boundary syntactic within the module system.
- 'use server' allows server functions to be exported and called from the client as async HTTP calls, providing a typed, statically analyzable RPC mechanism.
- 'use client' allows server code to import client components as references that become <script> tags, with optional server-side prerendering for initial HTML.
- Together, these directives enable modeling a client/server application as a single program spanning two environments, with type safety, dead code analysis, and reusable abstractions.
- The directives are not React-specific; they represent a paradigm similar to structured programming or async/await, expressing the network gap at the module level.
- Neither directive executes code on import; they only provide references (client reference or async function) that bridge the two runtime environments.
Static as a Server — overreacted
2 months ago
- Static sites can be generated by running a server framework during build time and saving the responses to disk.
- Hybrid frameworks support both server and static output modes, reducing tooling fragmentation.
- Hybrid approach allows route-by-route choice between static and server rendering, offering flexibility.
- React Server Components can run at build time for static deployment, as demonstrated with Next.js's output: 'export'.
- The distinction between 'server' and 'static' frameworks is blurring; any server framework can produce static output.
I'm Doing a Little Consulting — overreacted
2 months ago
- Left Meta in July 2023, then spent almost two years at Bluesky working on React Native and engineering management.
- Took a long break after leaving Bluesky, now free-floating and uncertain about the future of his skillset and field.
- Revived his blog, mainly writing about React Server Components, and is now offering consulting in UI engineering (React/React Native) via 1:1 hourly calls.
The Electron view that stayed blank until you resized the window
2 months ago
- Embedding Chromium via WebContentsView causes native view to be always on top, requiring hiding and showing when overlays open.
- Zero-size views lose compositor surfaces; fixing by parking at 1×1 pixels instead.
- Long hides evict frames; restoring requires two-step size changes across event loop turns.
- React effect cleanup and dedup cache bugs can cause blank views by preventing proper bounds updates.
- Debugging must target the actual failing layer, as app screenshots may mislead about on-screen blankness.

react

Making Referential Stability a Type

Why Do We Write super(props)? — overreacted

How Does React Tell a Class from a Function? — overreacted

Why Do React Elements Have a $$typeof Property? — overreacted

My Wishlist for Hot Reloading — overreacted

How Does setState Know What to Do? — overreacted

How Are Function Components Different from Classes? — overreacted

Writing Resilient Components — overreacted

Algebraic Effects for the Rest of Us — overreacted

How Does the Development Mode Work? — overreacted

My Decade in Review — overreacted

Before You memo() — overreacted

The Two Reacts — overreacted

What Does "use client" Do? — overreacted

Static as a Server — overreacted

I'm Doing a Little Consulting — overreacted

The Electron view that stayed blank until you resized the window