Deleting Code, with style
summary
Preact stays a ~3kB framework while adding fragments, component catch, CSS custom properties, hydration and the new createContext by fundamentally changing representation: it compares vnode normalization (two in-memory trees) instead of DOM nodes, converts function components into class instances, and removes heavy optimizations like the component recycler and text-node coalescing. Hooks live as a 900→700 byte addon, arrays auto-wrap in fragments to avoid key clashes, and these changes actually keep builds under ~3.6KB after the new features.
AI-written summary · about
chapters (38)
- 0:00Intro
- 1:48What is localhost
- 2:28kilobytes
- 3:17React X
- 5:15Size difference
- 5:53How the hell is this possible
- 6:59Familiarity
- 7:44Secret tricks
- 8:10Architecture
- 9:18Side effects
- 10:18Apples vs oranges
- 11:40What does it mean
- 12:35Compare apples to apples
- 13:12Compare props to props
- 13:27Access a special property
- 14:01Type property
- 14:14Simplification
- 14:45Code branches
- 16:00Function components
- 17:21Data normalization
- 17:56Component recycler
- 18:52Stepbystep
- 19:12Component summary
- 19:27Deleting DOM nodes
- 22:48Key optimization
- 24:28Arrays
- 28:30What can we save
- 29:50Where to save
- 30:44Context API
- 32:00Code coughing
- 33:22Gzip compression
- 34:01Reuse variables
- 35:09classes
- 36:31ref
- 37:49Summary
- 39:10normalization
- 39:29simple
- 39:59outro
related talks
28mPreact: Into the void 0
33mReact Advanced Patterns
28mWhat the v...DOM?
28mMastering React Component Library Optimization
22mCrafting Pristine React: Best Practices for Maintainable Code
55mA sneak peek into super optimized code in JS frameworks
38mReact as a Developer Health Tool
42mClean Code vs. Dirty Code: React Best Practices