keuller magalhães - react performance from scratch
TRANSCRIPT
Agenda
- Showcase
- First Render
- Bundle Size
- Render Performance
- Webpack
- Tips
Showcase
Demo
First Render
Simple Form
React 189.14ms
Preact 94.16ms
Rax 68.93ms
Inferno 61.07ms
Bundle Size
Inferno Perf
React P
erfR
ax Perf
Preact P
erf
Render Performance
Tips
- Each component must have single responsibility
- Use (and abuse) Functional Components
- Extends PureComponent instead of Component (React)
- Overwrite shouldComponentUpdate whenever possible
- Avoid save state in components
- Avoid controlled components
- Split out your bundle
- Configure your module bundler to optimize your production bundler
The Winner is...
