Fixing Wasted Rendering Issues

Hendrik Swanepoel
SOFTWARE ENGINEER
@hendrikswan
React Components Browser DOM nodes

App

Card Summary
React Components Browser DOM nodes

App

Card Summary
Render 1 Render 2 Mutations

+
+ = -
*
Virtual DOM Actual DOM

+
+
Virtual DOM Actual DOM

+
+
Demo
Preventing Wasted Renders in a Simple
Component
Demo
Preventing Wasted Renders in Functional
Components
Demo
Preventing Wasted Renders When Dealing
with Complex Props
Demo
Using Immutable Data in Order to Allow
for Comparisons
Demo
Preventing Wasted Renders in Repeated
Components
Summary

PureComponent - reference checking

shouldComponentUpdate - custom checks
React.memo
Fixing Large Bundle Issues
Dealing with Expensive Operations