Temporal
React Performance
4 hours, 31 minutes
CC
Course Description
Optimize React applications for maximum performance. Learn to structure components and memoize to avoid re-renders, load code on-demand, and leverage new concurrent features in React 18. And you’ll use the React Profiler to diagnose and solve performance issues. This course will take your React skills to new heights to help you build faster apps!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseWhat They're Saying
Just finished the React performance course by Steve Kinney on Frontend Masters. Thanks for the content, very relevant and useful.
Pere Sola Claver 🇺🇦
petrussola
I just completed "React Performance" by Steve Kinney on Frontend Masters! Learnt a lot. Was a good experience. 🙂
Vijay Pagare 🇮🇳✨
pagarevijayy
Course Details
Published: January 23, 2023
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 9 minutes
Steve Kinney introduces the course by discussing who this course is for, providing a high-level overview of the course material, and a preview of the end-course hierarchy to follow when problem-solving React Performance.
React Rendering
Section Duration: 1 hour, 11 minutes
Steve provides some quick wins to check before looking into performance, including checking that the app is running in production mode, components include keys, and utilizing the React developer tools. A demonstration of what functionality the React dev tools adds to browsers is also covered in this segment.
Steve answers student questions regarding how often using just the React dev tools profiler is not enough and how much overhead the benchmarking adds. General themes for web performance, including component hierarchy and state management, memoization, the Suspense API, and the Transition API are also discussed in this segment.
Steve discusses the three phases of React's rendering cycle: render, commit, and clean up. Student questions regarding where animations happen and how that affects rendering, what happens if multiple state changes are triggered, and how rendering is handled with shouldComponentUpdate are also covered in this segment.
Steve discusses a React data structure used to track component instances called fiber and automatic batching introduced in React 18. Student questions regarding if there is a reason not to auto-assign keys and if you need to be cautious with the Context API are also covered in this segment.
Students are instructed to look through the provided repository and find where the performance error occurs. Steve then discusses what is causing the performance error and provides options to improve the application's performance.
Steve answers student questions regarding if the inputs staying on each key press should be debounced, if useEffect should be used, and if the useState default should only run once. Why different answers weren't given after every keystroke is also covered in this segment.
Reducing Renders
Section Duration: 1 hour, 26 minutes
Steve demonstrates starting to reduce the number of times an application rerenders without memoization by pushing the state down. A student's question regarding if sibling components that share the same useState should be put somewhere else when using Context API is also covered in this segment.
Students are instructed to refactor the component hierarchy, so the input field becomes responsive again. Steve then walks through a possible solution to the exercise and student questions regarding whether memo could be used on the expensive component or on a component that is displaying a 3D graphics canvas.
Steve discusses pulling content up the hierarchy when a component pulls in children as a prop.
Students are instructed to adjust the application layout, so the ExpensiveComponent is between GameInput and GameStatus without moving the component back up the hierarchy by pulling up content with children. When referring to this type of children, other frameworks, including Svelte, Vue, and Web Components, use the term "slots."
Steve walks through a possible solution to the pulling content-up exercise. Pulling up the content through children allows each component to update only itself and improve performance when rendering.
Steve demonstrates using the React hooks useMemo to cache the result of a calculation and useCallback to cache a function definition between re-renders. Student questions regarding utilizing useCallback instead of useMemo creating new functions and if the interest in the execution of the body is why useCallback is used are also covered in this segment.
Steve demonstrates using useReducer and dispatch to replace useCallback hooks and dispatch the items for the item lists. A bonus round of replacing useReducer with useState is also covered in this segment.
Steve answers student questions regarding the main benefit of switching to useReducer and why only components are shown in the flamegraph.
Context
Section Duration: 55 minutes
Steve walks through implementing Context API to pull in the individual items in the item lists. Context provides a way to pass data through the component tree without having to pass props down manually at every level.
Steve discusses what caused performance loss and re rendering when implementing Context API and demonstrates how to fix it by adding more Context. A student's question regarding how children can access context values when they are calculated before is also answered in this segment.
Students are instructed to look through the provided repo for why using multiple contexts is not working in this application. Steve then walks through a possible solution to the exercise.
Students are instructed to look through the provided repo for performance issues other than the previously solved context issue. Steve then walks through possible solutions to the found performance issues.
Steve discusses the potential performance benefits of normalizing an application's state.
Suspense & Transitions
Section Duration: 39 minutes
Steve discusses using the React component Suspense to display fallback content until its children have finished loading. A tour of the project notes repo is also provided in this segment.
Steve discusses maintaining an app's interactivity when expensive computations are involved by prioritising tasks.
Steve demonstrates implementing startTransition, from the useTransition hook, which is used when triggering an update in an event handler.
Steve demonstrates the useDeferredValue hook which is used when receiving new data from a parent component. A student's question regarding if startTransition can be thrown away is also covered in this segment.
Wrapping Up
Section Duration: 8 minutes
Steve wraps up the course by discussing the course overview slide previewed at the beginning of the course and answering student questions. Student questions regarding when Suspense was introduced and recommendations for additional reading resources are covered in this segment.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops