Table of Contents
Introduction
React Rendering
Inspect Performance with Dev Tools
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.Dev Tools Q&A
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.React Rendering Cycle
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.React Fiber & Rendering Q&A
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.Find a Performance Issue Exercise
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.Performance Issue Q&A
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
Reducing Rerenders
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.Pushing State Down Exercise
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.Pulling Content Up with children
Steve discusses pulling content up the hierarchy when a component pulls in children as a prop.Pulling Content Up Exercise
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."Pulling Content Up Solution
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.useMemo & useCallback
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.useReducer & dispatch
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.Reducers Q&A
Steve answers student questions regarding the main benefit of switching to useReducer and why only components are shown in the flamegraph.
Context
Context API
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.Using Multiple Contexts
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.Multiple Contexts Exercise
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.Separating Context & State 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.Normalizing State
Steve discusses the potential performance benefits of normalizing an application's state.
Suspense & Transitions
Fallback Content with Suspense
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.Maintaining Interactivity
Steve discusses maintaining an app's interactivity when expensive computations are involved by prioritising tasks.useTransition Hook
Steve demonstrates implementing startTransition, from the useTransition hook, which is used when triggering an update in an event handler.useDeferredValue Hook
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.