Designing High Performance React Applications

Overview

Limited-Time Offer: Up to 75% Off Coursera Plus!

7000+ certificate courses from Google, Microsoft, IBM, and many more.

The course focuses on designing high-performance React applications, covering topics such as why web performance matters, core web vitals, rendering, making use case decisions, and performance optimization techniques. Students will learn about budget JavaScript, immutability, reconciliation, virtualization, batching updates, server-side rendering, suspense, server components, and advanced rendering patterns. The teaching method includes lectures, slides, and practical examples. This course is intended for developers and engineers interested in improving the performance of their React applications.

Syllabus

Intro
why performance matters?
Core Web Vitals
Sooner Time To Interactivity Lesser Layout Shifts
Bundling & Splitting
Budget JavaScript
Analyse JavaScript bundle size & Optimise
Avoid Data mutation
Immutability
Reconciliation
Virtualization
React 18 - Automatic Batching
Batching is when React groups multiple state updates into a single re-render for a better performance
Client Side Rendering (CSR)
Server Side Rendering (SSR)
React 18 - Suspense in SSR
LYDIA HALLIE Advanced Rendering Patterns
It depends
React 18 - Server Components
Use Technologies as needed
Limit component size
Cache is your friend
Image Lazy Loading
Inline critical ; defer non-critical
Remove unused resources
React Profilers
Performance Optimisation is an ongoing process
Measure! Optimize!! Measure!!!
Questions