Learn to design high-performance React applications in this conference talk from JSWORLD Conference 2022. Explore why web performance matters, understand Core Web Vitals, and make informed use case decisions. Dive into topics such as rendering optimization, bundling and splitting, JavaScript budget management, and data mutation avoidance. Discover the benefits of immutability, reconciliation, and virtualization in React. Examine React 18 features like Automatic Batching and Suspense in SSR. Compare client-side and server-side rendering approaches, and learn about advanced rendering patterns. Gain insights on limiting component size, leveraging caching, implementing image lazy loading, and optimizing resource usage. Master the use of React Profilers and understand why performance optimization is an ongoing process that requires continuous measurement and improvement.
Overview
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
Taught by
JSWORLD Conference
