Understanding Rendering Patterns
summary
Compares React’s virtual DOM and reconciliation with fine‑grained signals update without re-rendering; shows two live counter demos where React causes extra component renders (fixed partially by React.memo only hides renders) while a signals-based framework updates the displayed value without rerunning component bodies. Explains signals as synchronous push‑notify plus accessor pull to avoid backpressure, lists concrete tools (Qwik, Solid, Vue 3 shallowRef, Svelte/Angular signal APIs, createStore, control‑flow helpers) and warns of stricter coding patterns required for correctness.
AI-written summary · about
chapters (13)
- 0:00Introduction to talk
- 1:04Rendering strategies overview
- 2:50Virtual DOM and reconciliation
- 4:18React Forget and memoization
- 5:21Demo: React counters
- 7:50Fine grain reactivity concept
- 8:14Demo: Signals vs React
- 10:28Signals vs RxJS differences
- 13:00Signals tradeoffs and best practices
- 15:09SolidJS helpers and components
- 17:17Takeaways and framework signals
- 18:22Signals in Vue, Angular, Svelte
- 20:08Summary and recommendations
related talks
31mUnderstanding Rendering Patterns
17mDissecting Reactivity Signals Vs vDOM
34mRendering Dilemma: Reacting to State Change
34mReact The Good Parts
06mEmbracing Reactivity: Signals Unveiled in Modern Web Frameworks
51mDeep dive into modern frameworks Reactivity🔬⚛️
28mSignals: What, How, and Why!
44mComparative study of reactivity across frameworks and implications for Resumability