Profiling React rendering performance - SERGEY RYZHOV

Sdílet
Vložit
  • čas přidán 2. 10. 2019
  • Slides: the-pirate-list.netlify.com/t...
    Rendering is not a common performance bottleneck in React applications. It’s more about large bundle sizes or slow network requests. At the same time rendering problems can be challenging to discover and mitigate. So when user experience gradually becomes
    more and more janky most of us just use an old-school debugging technique “comment out this line of code, refresh and see if something changed”. This is not optimal and there are better approaches to performance profiling.
    We are going to use Chrome Perfomance Tab and new React DevTools Profiler plugin to profile a real application. We will learn how to use these tools to identify rendering problems and make user experience really smooth. We are going to explore different React optimization techniques that allow us to avoid unnecessary rerenders or doing heavy computations on every render (memo, useMemo, useCallback).
    We are also going to touch how experimental Profiler component can be used to collect timing information and measure the "cost" of rendering.
  • Věda a technologie

Komentáře • 5

  • @sbarter
    @sbarter Před 2 lety +1

    great talk, but = the applause at the end just made me jump out of bed at 4 am in fear i woke up the entire house.

  • @kirankandula2779
    @kirankandula2779 Před 3 lety +1

    An awesome presentation with humor added. Thanks for it.

  • @varunsatya
    @varunsatya Před 3 lety +1

    Am I the only one who's excited to implement this in production code and later regret doing that while debugging
    An awesome presentation though

  • @quorkquork
    @quorkquork Před 4 lety

    "Why don't you put lodash memoize() around every function?"
    I would if I could.