Skip to content

Latest commit

 

History

History
211 lines (152 loc) · 4.93 KB

deck.mdx

File metadata and controls

211 lines (152 loc) · 4.93 KB

import { Head, Image, Appear } from 'mdx-deck';

<title>React Performance</title>

Performance Optimization with React

Sibasish Mohanty

What this talk is

  • Understand when (not) to go for performance optimization
  • Monitor the performance and identify the cause
  • Get familiar with right tools and techniques

What this talk is not

  • Load-time performance vs Runtime performance
  • SSR, CDN, Web Workers, Caching, Throttling and Debouncing
  • How a particular tool works

How do we know if we have a performance problem?

  • (A part of) the website takes forever to load
  • Navigating to different section seems sluggish
  • It takes more than one click to submit a form
  • DOM operations are not instantaneous
  • ... And many other reasons that creates a bad UX

How do we approach optimizing the performance?

  • Get familiar with the problem you are solving
  • Identify the right tool for the task
  • Profile before optimizing
  • Know the cost of the optimization
  • Quantify the improved performance

Build for production

  • Use the production version when you deploy the app.

  • Add performance monitoring with <React.Profiler /> to keep track of performance regressions

Bundling and minification

  • Remove unnecessary modules and replace large modules with smaller alternatives
  • Analyze bundle size with webpack bundle analyzer
  • Serve minified bundle in production with compression webpack plugin
  • Helped reducing canvas bundle size from 25.9 MB to 5.8 MB and impoved the time to interactive by 75%

Code splitting

  • Loading less code will speed up your app
  • Dynamic imports with <React.Suspense /> and React.lazy()
  • Eager loading and prefetching dynamic imports for better UX

import LazyLoad from './components/lazy-load';

Memoize expensive calculations

  • Bulky functions executed in every single render cycle
  • Memoized functions run when the results actually needs to be re-evaluated
  • Don't overuse useMemo and useCallback

Which one is better for performance?

import { Highlighter } from './components/highlighter';

{const removeUser = user => { setUser(allUsers => allUsers.filter(u => u !== user)) } }

... And the one with useCallback

{const removeUser = React.useCallback(user => { setUser(allUsers => allUsers.filter(u => u !== user)) }, []) }

Every line of code which is executed comes with a cost

{`const removeUser = user => { setUser(allUsers => allUsers.filter(u => u !== user)) } const removeUserCallback = React.useCallback(removeUser, []); `}

... And here is the original one

{const removeUser = user => { setUser(allUsers => allUsers.filter(u => u !== user)) } }

Avoid unndecessary re-renders

  • Immutability and reference equality
  • A PureComponent is going to be usually slower and ocassionally faster
  • Optimze slow renders before fixing re-renders
  • Virtualize large list of data with react-virtualized

import Memoize from './components/memoize';

Cost vs Benefit

  1. Bundling and minification
  2. Code splitting
  3. Memoize expensive calculations
  4. Virtualize long lists
  5. Avoid unnecessay re-renders

Conclusion

  • Write your code naturally, code to the design
  • Performance optimizations may not offset the cost it comes with
  • If you aren’t measuring, you can’t even know if your optimizations are better

Further readings

Thank you