Table of Contents
IntroductionSteve 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.
Inspect Performance with Dev ToolsSteve 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&ASteve 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 CycleSteve 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&ASteve 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 ExerciseStudents 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&ASteve 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 RerendersSteve 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 ExerciseStudents 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 childrenSteve discusses pulling content up the hierarchy when a component pulls in children as a prop.
Pulling Content Up ExerciseStudents 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 SolutionSteve 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 & useCallbackSteve 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 & dispatchSteve 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&ASteve answers student questions regarding the main benefit of switching to useReducer and why only components are shown in the flamegraph.
Context APISteve 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 ContextsSteve 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 ExerciseStudents 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 ExerciseStudents 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 StateSteve discusses the potential performance benefits of normalizing an application's state.
Suspense & Transitions
Fallback Content with SuspenseSteve 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 InteractivitySteve discusses maintaining an app's interactivity when expensive computations are involved by prioritising tasks.
useTransition HookSteve demonstrates implementing startTransition, from the useTransition hook, which is used when triggering an update in an event handler.
useDeferredValue HookSteve 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.