React Performance

Steve Kinney

Steve Kinney

Temporal
4 hours, 31 minutes CC
React Performance

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
Close

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
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 9 minutes
  • Introduction
    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
  • 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

Section Duration: 1 hour, 26 minutes
  • 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

Section Duration: 55 minutes

Suspense & Transitions

Section Duration: 39 minutes

Wrapping Up

Section Duration: 8 minutes
  • Wrapping Up
    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.
Just finished the React performance course by Steve Kinney on Frontend Masters. Thanks for the content, very relevant and useful.
Pere Sola Claver 🇺🇦

Pere Sola Claver 🇺🇦

petrussola

I just completed "React Performance" by Steve Kinney on Frontend Masters! Learnt a lot. Was a good experience. 🙂
Vijay Pagare 🇮🇳✨

Vijay Pagare 🇮🇳✨

pagarevijayy

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now