React Performance Playbook

Focused View

Kamran Ayub

4:15:34

376 View

1. Course Overview

1. Course Overview.mp4

02:18

2. Introduction to React Performance Optimization

1. Why Performance Optimization Matters.mp4

07:52

2. Avoiding the Pitfalls of Performance.mp4

05:46

3. Get to Know Common React Bottlenecks.mp4

03:12

4. Summary.mp4

00:27

3. Conducting Performance Audits

1. What Is a Performance Audit.mp4

06:47

2. Performance Audit Step-by-Step.mp4

09:35

3. Understanding and Auditing Web Vitals.mp4

08:28

4. Measuring App Rendering Performance.mp4

07:52

5. Measuring App Execution Performance.mp4

07:14

6. Measuring App Memory Performance.mp4

09:49

7. Measuring Render Time with Profiler.mp4

06:33

8. Monitoring Performance Over Time.mp4

08:38

9. Summary.mp4

00:48

4. Preventing Unnecessary Re-renders

1. What Are Wasted Renders.mp4

07:59

2. Diagnosing Why Components Update.mp4

04:26

3. Simplifying Passing of Props.mp4

06:52

4. React Memoization in 3 Minutes.mp4

03:05

5. Creating Stable Functions with useCallback.mp4

05:44

6. Avoiding Expensive Calculations with useMemo.mp4

08:04

7. Controlling Component Re-rendering with React.memo.mp4

07:18

8. Summary.mp4

00:36

05. Optimizing and Refactoring Components

01. Lean Component Design Principles.mp4

06:03

02. The Hidden Cost of DOM Reconciliation.mp4

02:36

03. Optimizing the Family Tree Using Slots.mp4

05:54

04. Choosing an Efficient Styling Approach.mp4

10:35

05. Reducing Hook Re-rendering Using Shared State.mp4

06:30

06. Isolating Updates Using Render Props.mp4

04:51

07. Controlling Internal State with useReducer.mp4

08:18

08. Simplify Complex UI with State Management.mp4

03:55

09. Optimizing Derived State with Selectors and Slicing.mp4

10:57

10. Reducing DOM Updates with useRef and Uncontrolled Components.mp4

04:21

11. Prioritizing Urgent State Updates with Suspense.mp4

06:06

12. Summary.mp4

01:09

06. Optimizing Assets and Loading Time

01. Lean Application Delivery Principles.mp4

06:09

02. Assessing Your Apps Initial Load.mp4

08:42

03. Optimizing Your React Toolchain.mp4

05:18

04. Enabling Source Maps in Production, Or Not.mp4

03:54

05. Optimizing Transpilation with Browserslist.mp4

06:53

06. Diagnosing Unused Code with the Coverage Tool.mp4

05:43

07. Diagnosing Bundle Size with Bundle Analysis.mp4

03:26

08. Optimizing Bundles with Code Splitting and Lazy Loading.mp4

06:31

09. Optimizing Navigations with Speculative Loading and Priority Hints.mp4

06:15

10. Summary and Takeaways.mp4

02:05

Description

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.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

React

Kamran Ayub

Instructor's Courses

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 8 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 at regional conferences and user groups, including NDC MN and Midwest.js. He helps maintain the Excalibur.js open source game engine, runs the video game organization app, Keep Track of My Games, dabbles in game development, and is active in open source.

Pluralsight

View courses Pluralsight

Pluralsight, LLC is an American privately held online education company that offers a variety of video training courses for software developers, IT administrators, and creative professionals through its website. Founded in 2004 by Aaron Skonnard, Keith Brown, Fritz Onion, and Bill Williams, the company has its headquarters in Farmington, Utah. As of July 2018, it uses more than 1,400 subject-matter experts as authors, and offers more than 7,000 courses in its catalog. Since first moving its courses online in 2007, the company has expanded, developing a full enterprise platform, and adding skills assessment modules.