Temporal
React Performance, v2
4 hours, 10 minutes
CC
Course Description
Ship high-performance React applications! Leverage React 19's performance strategies for hydration, suspense, resource loading, and server actions. Reinforce time-tested best practices for memoization, virtualization, and code splitting. Quickly diagnose performance bottlenecks and costly re-renders and build apps that look and feel fast!
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
What They're Saying
Loved this new version of the course. Really useful. Steve is fantastic.
Elina Jaimes
Course Details
Published: November 10, 2025
Rating
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 250+ In-depth courses
- 24 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 18 minutes
Steve Kinney introduces the course by discussing various concepts and tools related to state management, memoization, and upcoming changes in React. Steve also mentions the focus on practical labs inspired by real-world scenarios to help identify and address performance issues.
Steve discusses the different types of performance issues like a noticeable bottleneck that can slow down an application significantly and performance problems caused by the slow accumulation of small issues.
Steve explains the structure of the notes, from high-level summaries to more detailed code examples, and mentions the option to explore bonus materials in the appendix. He also provides the repository and which branches will be used.
Rendering & React Fiber
Section Duration: 50 minutes
Steve discusses his rules for performance and the importance of not doing unnecessary tasks for optimal speed. He explains how making an app feel fast is just as crucial as making it actually fast, discussing techniques like pre-loading and optimistic UI updates.
Steve explains how React handles rerenders and explains the three main reasons why components may rerender: when a component's state changes, when the context changes, or when its parent changes. He also discusses strategies to prevent unnecessary rerenders, such as memoization and optimizing the use of the context API.
Steve introduces React Fiber as a cooperatively scheduled rendering engine that makes React smarter about handling DOM updates. He also explains how it breaks tasks into smaller chunks, prioritizes important work, and allows interruptions, similar to using setTimeout to let other tasks run, which improves performance.
Steve explains how React Fiber uses a virtual DOM to manage changes efficiently. He describes the current tree in the DOM and a work-in-progress tree that allows unfinished work to be reverted if needed. Steve outlines the rendering phase, where changes are determined, and the commit phase, where they’re applied, emphasizing the importance of checking for updates to avoid wasted work.
Steve explains lanes in React Fiber, noting there are six lanes but developers control only two urgent ones. He highlights the importance of marking tasks as urgent or not to prioritize user actions like clicks and key presses. Steve also shows how lane assignment works, grouping updates by priority and applying changes to the DOM in the commit phase.
Managing State
Section Duration: 40 minutes
Steve walks through accessing the repository and installing tools. He explains how to use the React developer tools, run examples, and start the development server. He highlights key features like components, profilers, and performance tools, stressing the importance of understanding re-renders and optimizing components.
Steve discusses pushing state down and balancing state in the application component. He walks through the code and shows how to improve state management by restructuring components. Steve also demonstrates a refactor, moving logic to the right place and highlighting practical performance trade-offs.
Steve instructs students to practice using the repo and developer tools while building muscle memory. He discusses identifying unnecessary re-renders and optimize components by pushing state down the tree, explaining the trade-offs between performance and complexity.
Memoization
Section Duration: 56 minutes
Steve introduces memoization and explains how hooks like useMemo and useCallback optimize performance by avoiding unnecessary computations. He shows how to implement memoization in a component to prevent re-renders and improve application efficiency.
Steve discusses memoization and its role in the React compiler. He explains how wrapping components and using hooks like useMemo and useCallback helps React.memo optimize rendering by preventing unnecessary re-renders.
Steve introduces a complex application called Memomania, showcasing high-level opportunities for optimization. He demonstrates using the profiler to analyze changes and explains how useMemo and memoization can improve performance and prevent unnecessary re-renders.
Steve introduces the concept of wrapping a function in React.memo to optimize performance. He explains how memoization can be implemented using useCallback to prevent unnecessary re-renders. Steve demonstrates how using useCallback and React.memo can help maintain static values and prevent unnecessary rendering of components.
Steve demonstrates wrapping a function in React.memo to optimize performance. He explains how useCallback can prevent unnecessary re-renders and demonstrates using both to maintain static values and reduce component rendering.
Transitions & Deferred Values
Section Duration: 1 hour, 16 minutes
Steve introduces start transition and use deferred value. He explains how start transition prioritizes low urgency tasks and use deferred value triggers expensive operations without blocking user interactions. Steve demonstrates using these hooks to keep an app responsive and prioritize urgent tasks.
Steve introduces an app for fuzzy searching nested Pokémon data. He demonstrates the lag when typing and emphasizes the need for optimization. Steve explains how React Fiber can prioritize user input to make interactions feel faster and more responsive.
Steve discusses using transitions to prioritize user interactions over expensive operations. He also demonstrates separating and updating two search queries with useMemo and useState and shows how to indicate pending operations while leveraging React Fiber for efficient updates.
Steve introduces use deferred value, explaining how it handles low priority tasks when you don't control incoming data. He also demonstrates how it delays processing to manage potential cascading effects and keep the application responsive.
Steve discusses optimistic updates, explaining how they improve user experience by assuming success. He also demonstrates using React suspense and the useOptimistic hook to manage promises and enhance app performance.
Steve discusses optimistic updates, showing how to give users immediate feedback while waiting for server responses. He also demonstrates implementing them in React and explains how they improve user experience and app performance.
Steve answers student questions regarding improving React app performance, prioritizing bottlenecks, using memoization safely, and balancing UI state with application logic while sharing practical insights from real-world experience.
Wrapping Up
Section Duration: 8 minutes
Steve wraps up the course by reviewing key React performance concepts and emphasizing practical ways to optimize apps while focusing on real bottlenecks.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops