React is a component framework for building user interfaces that renders components frequently. There are three main ways to tune React's performance: 1) Measure render performance using ReactPerf to identify unnecessary renders, 2) Control when components update using lifecycle methods like shouldComponentUpdate(), and 3) Use immutable data structures and the PureRenderMixin to enable fast comparisons of props and state. The presentation demonstrated these techniques and emphasized optimizing React applications for performance.

1. Building High-Performance
Force.com Applications with React
Kevin O’Hara
CTO // LevelEleven
kevin@leveleleven.com
@kevohara

2. Quick Overview on React
Performance Tuning React
Demos
Wrap-Up & Q/A
What We’ll Cover Here Today

3. What is React?
• A component framework for building UI’s
• Built by Facebook
• Build UI with pure JS or JS + JSX
• Virtual DOM technology

4. React Renders…a Lot

5. 1.A way to measure render()
performance
2.Ability to tune when React renders
a component
3.Data structures that allow for
comparability
3 Needs
Performance Tuning React

6. • Must use the react-with-addons.js build
• For use only in development mode
• Figure out when you are wasting time in render()
Using ReactPerf
Performance Tuning React

7. • render() always happen unless you tell a
component when it should update
• Use shouldComponentUpdate()
• Compare data to conditionally render()
components
• Use PureRenderMixin
Lifecycle Methods
Performance Tuning React

8. Use Immutable DataRemove Deep Lookups
Highly Comparable Data
Performance Tuning React

9. Demo Time

10. • Learn the Performance Profiler
• Hook into the lifecycle methods in
React
• Use immutable data
• When appropriate, use the
PureRender mixin
• Love React…always
Wrap-Up
twitter: @kevohara
github: kevinohara80

11. Q/A

12. Thank you