React Performance Playbook
Slow React app with unhappy users? This course will teach you how to quickly audit, diagnose, and solve common performance issues in React applications so you can design them more efficiently and ultimately deliver an optimized real-user experience.
What you'll learn
Complex React applications have a lot of moving parts that can grind to a halt, causing a poor user experience. In this course, React Performance Playbook, you’ll learn to audit, diagnose, solve, and prevent React web performance problems. First, you’ll explore how performance drives business value and how to get buy-in with your team. Next, you'll learn to design and perform a performance audit to identify issues. Then, you’ll see how to optimize common component performance problems that reduce unnecessary re-renders. Finally, you’ll learn how to optimize your app’s loading time and deliver an improved real-user experience. When you’re finished with this course, you’ll have the skills and knowledge of React performance needed to make your app snappy and your users happy.
Table of contents
- What Is a Performance Audit? 7m
- Performance Audit Step-by-Step 10m
- Understanding and Auditing Web Vitals 8m
- Measuring App Rendering Performance 8m
- Measuring App Execution Performance 7m
- Measuring App Memory Performance 10m
- Measuring Render Time with <Profiler /> 7m
- Monitoring Performance Over Time 9m
- Summary 1m
- Lean Component Design Principles 6m
- The Hidden Cost of DOM Reconciliation 3m
- Optimizing the Family Tree Using Slots 6m
- Choosing an Efficient Styling Approach 11m
- Reducing Hook Re-rendering Using Shared State 7m
- Isolating Updates Using Render Props 5m
- Controlling Internal State with useReducer 8m
- Simplify Complex UI with State Management 4m
- Optimizing Derived State with Selectors and Slicing 11m
- Reducing DOM Updates with useRef and Uncontrolled Components 4m
- Prioritizing Urgent State Updates with Suspense 6m
- Summary 1m
- Lean Application Delivery Principles 6m
- Assessing Your App's Initial Load 9m
- Optimizing Your React Toolchain 5m
- Enabling Source Maps in Production, Or Not 4m
- Optimizing Transpilation with Browserslist 7m
- Diagnosing Unused Code with the Coverage Tool 6m
- Diagnosing Bundle Size with Bundle Analysis 3m
- Optimizing Bundles with Code Splitting and Lazy Loading 7m
- Optimizing Navigations with Speculative Loading and Priority Hints 6m
- Summary and Takeaways 2m
About the author
Kamran is a full-stack web developer who lives in beautiful Minneapolis, Minnesota. He is the founder of Keep Track of My Games, which is like Goodreads but for gamers. He also helps maintain the Excalibur.js TypeScript game engine and speaks regularly at conferences like NDC and React Summit. Previously, he worked as an enterprise web developer for over 12 years for companies like Target and General Mills until he quit to spend more time with family and take summers off. He loves sharing what h... more