State of Components
summary
Compares three concrete designs — React Hooks, Vue Composition API, and Svelte 3 — and argues components are shifting away from class instances toward stateful modules. Shows Hooks store state by call-order slots and forces manual dependency arrays (leading to stale-closure bugs), shows Composition API runs once with automatic dependency tracking and ref wrappers, and shows Svelte’s compiler injects change invalidation for very terse code but ties logic to component context. Lays out practical trade-offs and where extra runtime or tooling friction appears.
AI-written summary · about
chapters (18)
- 0:00Intro
- 0:45Defining Components
- 5:24UI Components
- 8:08React Looks
- 14:02Cross Module Composition
- 14:29Concurrent Mode
- 15:03Cons of Hooks
- 16:08How to use Hooks
- 16:34View Composition API
- 16:55Refactor Component
- 17:09Dependency Tracking
- 17:37Ref Concept
- 18:28Dependency Collection
- 18:43Stout
- 20:06Component Context
- 20:51Syntax
- 22:06Functional Programming
- 22:29Instable Stateful Modules
related talks
31mWhy I Still Choose React
21mModern State Management with Vue 3
28mThe State of React State in 2019
50mWriting React Components: The Functional Way
35mAdvanced patterns in building React Components
36mReusing Stateful Logic in React: HOC vs Render Props vs Hooks
44mWriting good components
16mComposition is King