Transcript
![Page 2: Keuller Magalhães - React Performance from Scratch](https://reader031.vdocuments.us/reader031/viewer/2022021815/5a6d7a4b7f8b9ac7418b6259/html5/thumbnails/2.jpg)
Agenda
- Showcase
- First Render
- Bundle Size
- Render Performance
- Webpack
- Tips
![Page 3: Keuller Magalhães - React Performance from Scratch](https://reader031.vdocuments.us/reader031/viewer/2022021815/5a6d7a4b7f8b9ac7418b6259/html5/thumbnails/3.jpg)
Showcase
Demo
![Page 4: Keuller Magalhães - React Performance from Scratch](https://reader031.vdocuments.us/reader031/viewer/2022021815/5a6d7a4b7f8b9ac7418b6259/html5/thumbnails/4.jpg)
First Render
Simple Form
React 189.14ms
Preact 94.16ms
Rax 68.93ms
Inferno 61.07ms
![Page 5: Keuller Magalhães - React Performance from Scratch](https://reader031.vdocuments.us/reader031/viewer/2022021815/5a6d7a4b7f8b9ac7418b6259/html5/thumbnails/5.jpg)
Bundle Size
![Page 6: Keuller Magalhães - React Performance from Scratch](https://reader031.vdocuments.us/reader031/viewer/2022021815/5a6d7a4b7f8b9ac7418b6259/html5/thumbnails/6.jpg)
Inferno Perf
React P
erfR
ax Perf
Preact P
erf
Render Performance
![Page 7: Keuller Magalhães - React Performance from Scratch](https://reader031.vdocuments.us/reader031/viewer/2022021815/5a6d7a4b7f8b9ac7418b6259/html5/thumbnails/7.jpg)
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
![Page 8: Keuller Magalhães - React Performance from Scratch](https://reader031.vdocuments.us/reader031/viewer/2022021815/5a6d7a4b7f8b9ac7418b6259/html5/thumbnails/8.jpg)
The Winner is...