React - Optimize Performance

Case 1 - Preventing Wasted Renders with Complex Props 

 Create new object reference before delete a key. 

 

 Class 

 

 Function 

 

 

   

 Case 2 - Preventing Wasted Renders in a Simple Component 

 Class 

 

 Function 

 Before 

 

 

 After 

 

   

 Caching Expensive Operation Results 

 

   

 Lazy Loading Components 

   

 

 Component: 

 

 Fallback: