Slow to Fast: Looking at React Performance Problems

Abhijeet Prasad

Software Engineer at Sentry (sentry.io)

Agenda 📓

1. User Operations�
2. Components
1. Building and optimizing components
2. Browser Dev Tools
3. React Profiler API�
3. Pages
• Building and optimizing pages
• Browser APIs + Metrics

https://github.com/getsentry/sentry

How do your users use your web application? 🤔

What are the operations we care about?

Page rendering

• Pageload
• Route changes (navigation)

User interactions

• Keyboard/Mouse
• Forms
• Animations

​

​

An example with Sentry

Issue Details

Editing Dashboards

A React component

https://github.com/getsentry/sentry/blob/master/static/app/components/list/listItem.tsx

Under the hood

• Rendering
• Virtual DOM: data structure representation of a UI
• Rendering elements with React.createElement: <App />�
• Reconciliation (pre-commit)
• Virtual DOM diffing�
• Committing Updates
• Manipulating data is often not expensive, but DOM layout I/O is

Goal: Minimize commits

Well, how can you tell?

• console.log
• shouldComponentUpdate�
• React Dev Tools
• Component View
• Profiler View�
• Browser Dev Tools

Visualizing component re-renders

React component flamegraph

Browser Dev Tools

Digging deep into components

• React profiling bundle + React Profiler API�
• Larger variety of user conditions

​

https://reactjs.org/docs/profiler.html

Using the React Profiler API

• Track the timings you care about!

https://reactjs.org/docs/profiler.html

Using the Profiler at Sentry

https://github.com/getsentry/sentry/blob/master/static/app/utils/performanceForSentry.tsx

Using the Profiler at Sentry

Common problems

• Frequent state updates on event listeners (e.g., scroll, drag, keydown)�
• Many, many, many components on a screen at the same time�
• React Context�
• Expensive computations blocking the main thread�
• Serial Network Requests

​

Fixing the problematic component! 🎯

• Measure first!�
• Memoization
• React.PureComponent, React.memo
• useMemo, useCallback�
• Bundle Optimization
• Lazy loading�
• Virtualization

Memoizing props

• Use React.memo to skip rendering if passed the same props�
• Can also provide a more detail matcher for more finely grained control�
• Remember not to overuse! If you can’t see the impact, don’t use it

​

https://github.com/getsentry/sentry/blob/master/static/app/components/events/interfaces/breadcrumbs/breadcrumb/index.tsx

Memoizing computations

• Use useMemo to avoid expensive computations every render
• Easier to control when individual children update�
• Use useCallback to keep the same callback references on every render�

​

https://github.com/getsentry/sentry/blob/master/static/app/views/profiling/flamegraphSummary.tsx

Lazy loading

• Reduce code needed during initial load�

​

https://github.com/getsentry/sentry/blob/master/static/app/components/lazyLoad.tsx

Virtualization

• Render only what can be seen in the current viewport
• Common with lists and tables�
• Recommend https://github.com/bvaughn/react-window�
• You can also roll your own setup

Components -> Pages

• Sometimes you can only do so much analyzing a component/set of components�
• Complex: many pages, and many page states

Sentry Release Page

Start measuring in the field!

• Web Vitals
• https://github.com/GoogleChrome/web-vitals�
• React Profiler API�
• PerformanceObserver API�

https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API

Use field data to figure out where to profile further

Install Sentry!

Sentry Performance Monitoring

Thank you