# Bài 10. Optimizing React Applications

### **1\. Giới thiệu**

1.1. Tầm quan trọng của optimization trong React apps  
1.2. Phạm vi của bài viết: các techniques và tools sẽ được đề cập

### **2\. Đánh giá hiệu năng (Performance Profiling)**

2.1. Chrome DevTools

* 2.1.1. Flame graphs
    
* 2.1.2. Waterfall view  
    2.2. React DevTools
    
* 2.2.1. Components tab
    
* 2.2.2. Profiler tab
    

### **3\. PureComponent và React.memo**

3.1. Shallow Comparison  
3.2. Khi nào và khi nào không sử dụng PureComponent/React.memo

### **4\. Virtual DOM và Reconciliation**

4.1. Cách React quản lý thay đổi  
4.2. Key Prop trong Lists

### **5\. Lazy Loading và Code Splitting**

5.1. Dynamic Imports  
5.2. React.lazy và Suspense  
5.3. Route-based code splitting

### **6\. Debouncing và Throttling trong Event Handling**

6.1. Concept và khác biệt  
6.2. Sử dụng Lodash hoặc custom hooks

### **7\. useMemo và useCallback**

7.1. Cách hoạt động và use cases  
7.2. Cảnh báo về việc over-optimization

### **8\. Server-side Rendering (SSR) và Static Site Generation (SSG)**

8.1. Next.js và khái niệm về SSR/SSG  
8.2. Khi nào nên sử dụng

### **9\. Web Workers trong React**

9.1. Concept và use cases  
9.2. Thư viện như Comlink để giảm boilerplate

### **10\. Best Practices**

10.1. Performance Budgets  
10.2. Monitoring và Analytics

* 10.2.1. Google Lighthouse
    
* 10.2.2. Real User Monitoring (RUM)
    

### **11\. Kết luận**

11.1. Tóm tắt những techniques quan trọng  
11.2. Preview các chủ đề tiếp theo trong series

### **12\. Tài liệu tham khảo và Resources**

Trong dàn ý này, tôi đã bao gồm các phần từ cơ bản đến nâng cao để bạn có thể đề cập đến optimization trong React một cách toàn diện.