React_Performance__2022.pdf

Transcript

2. Repositories • Wordman: https://github.com/stevekinney/wordman • Packing List: https://github.com/stevekinney/packing-list • Hottest Takes: https://github.com/stevekinney/hottest-takes • Project Notes: https://github.com/stevekinney/project-notes • Lots to Do: https://github.com/stevekinney/lots-to-do
3. Who is this for? It’s for you, of course. • You're looking for more insight into how React works. • You want to build a toolset for diagnosing performance issues in React. • You want to learn some best practices when building React applications in hopes of avoiding some performance issues down the road.
4. At a high level What are we going to cover? • React has a bunch of tools for caching and memoizing components. • But, you can also get a lot of bene f its for free just in the ways you structure your component hierarchy and application state. • Lastly, React 18 has a bunch of super cool new concurrency features.
5. This is the slide I’m going to show you at the end. • If you can solve a problem with how you shape your component hierarchy or state—do that first. • Memoization is a solid strategy only if the cost of checking pays for itself with the time you save rendering. • Using the Suspense API to progressively load your application is a good idea™. And, more good stu ff will come soon. • The Transition API is there for you when you’re really in a pickle.
6. But, f irst… • Are you running in production mode? Because, development mode is way than production mode. • And you out keys on the components that you mapped from arrays, right? Let’s get the quick wins out of the way.
7. The React Developer Tools Okay, then go get yourself the React Developer Tools.
9. Some themes • Not doing stu ff is way faster than doing stu ff . (Component hierarchy & state management) • Checking to see if you can skip doing stu ff is sometimes less work than doing stu ff . (Memoization) • Sometimes you can put o ff doing stu ff . (Suspense API) • Maybe you do the urgent stu ff now and then less urgent stu ff later? (Transition API) for web performance and for life.
10. How does React do what it does?
11. React’s Rendering Cycle How everything goes down.
14. Fibers and keys React tries real hard to keep track of all of the component instances. • A f iber is a fancy word for a very cool data structure that React uses to keep track of component instances. • When adding, removing, or changing the order of the collection, having unique keys allows React to keep track of which is which and—ideally—avoid having to spend too much e ff ort trying to f igure out what changed.
15. Automatic batching New in React 18. • TL;DR: If you trigger multiple state changes in a single pass, React will batch them all up for you before dragging you through the whole rendering process. • This only used to work with event handlers prior to React 18.
17. The worst game • It’s slow because I made a function that intentionally makes it slow. • But why is it repeatedly slowing down rendering? • Repository: https://github.com/ stevekinney/wordman • Branch: initial - slowdown - exercise Round one
18. Doing less stuff takes less time.
19. Pushing state down
20. The worst game • Yo, look! Our intentionally expensive function moved into a React component and there is nothing we can do about it. • Can you refactor the component hierarchy to get the input f ield to be responsive again? • Branch: pushing - state - down - exercise Round two
24. Pulling content up
25. The worst game • We now have a new problem. If we change the layout just a little bit, <ExpensiveComponent / > pops right up in the middle of everything. • Branch: pulling - content - up - exercise Round three: The f inal boss
26. Checking to see if you can’t just not do stuff.
27. Opting out of rendering Like, what if we just told React not render stu ff ? • 1. React.memo(), which works with both function- and class-based components. • 2. The shouldComponentUpdate() method on class-based components. • 3. Inheriting from React.PureComponent as opposed to React.Component when using class-based components.
28. Let’s not get carried away with memoization Checking to see if you need to do stu ff is technically doing stu ff .
29. All things are not equal… …in JavaScript. { foo: 1, bar: 2 } ! = = { foo: 1, bar: 2 } [1,2,3] ! = = [1,2,3] () = > {} ! = = () = > {}
30. Some more tools React has hooks to help. • useMemo(): If it was expensive to get this value or it could trigger a render, but it’s really no di ff erent than last time—then just use the value we had last time,. • useCallback(): Actually don’t whip up a new function if nothing has changed.
31. useMemo(() = > somethingSuperExpensive(a, b), [a, b]); useCallback(handleClickAndUpdateCount, [count]);
32. Fix my code • Well, I put those React.memo() calls everywhere like I read in that blog post one time. But, what happened? • Can you help? Please.
33. An alternative approach (Or, “I really like reducers.”) • There is another approach that we can take. • But, you might even want to combine the two approaches.
34. Now, let’s use the Context API!
35. Take note • There aren’t any special cases here. You can mostly following the same approach. • The only di ff erence is that it was never refactored to the useReducer(). It’s just using useState(). Do you want to take a swing at it?
36. Why isn’t my new trick working? Can you take a look? https://github.com/stevekinney/hottest-takes
37. On normalizing your state.
40. Keeping you in Suspense.
43. Editing suspenders • Can you add a Suspense boundary to the note editing view? • Repository: https:// github.com/stevekinney/ project-notes • Branch: with - suspense Progressively loading all the way down.
44. Transitioning to another way to do stuff later.
45. Filtering that list is painful https://github.com/stevekinney/lots-to-do
47. Two more hooks If I may quote from the documentation • startTransition() is used when triggering an update (i.e. setState) in an event handler. • useDeferredValue() is used when receiving new data from a parent component (or an earlier hook in the same component).
48. In conclusion • If you can solve a problem with how you shape your component hierarchy or state—do that first. • Memoization is a solid strategy only if the cost of checking pays for itself with the time you save rendering. • Using the Suspense API to progressively load your application is a good idea™. And, more good stu ff will come soon. • The Transition API is there for you when you’re really in a pickle.