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 Ayub is a technologist specializing in building full-stack solutions with a focus on modern web technology and cloud native architecture. He's spent over 12 years implementing consumer-facing and line of business applications for Fortune 500 companies using a vast array of technologies. He strives to design impeccable user experiences built using solid software quality practices like testability, scalability, and maintainability. Kamran loves sharing what he knows and presents regularly a... more