Maximizing Performance: Advanced Strategies for Optimising React Applications

Monthly WTM Meetup - Open for Everyone

Topic Abstract:

In the ever-evolving landscape of web development, optimizing the performance of React applications remains paramount for delivering exceptional user experiences. As we step into 2024, this session delves into advanced strategies and best practices to elevate the performance of React applications to new heights.

Below will be along hands-on demo:

Rendering Optimization
State and Data Management
Code and Bundle Optimization
Component and Resource Loading
Performance Analysis and Tools

Transcript

1. Maximizing Performance: Advanced Strategies for Optimising React Applications Nidhi Dadiya - 03/16/2024 1
2. Nidhi Dadiya 👋 2 2
3. Let’s Get Started 3 3 3
4. How React renders ? 4
5. • Trigger • Render • Commit 5 How React renders ?
6. Waiter 6
7. Waiter Trigger Kitchen 7
8. Waiter Trigger Kitchen Render Kitchen 8
9. Waiter Trigger Kitchen Render Kitchen Commit 9
10. • Trigger • Initial Render • When the component’s (or one of its ancestors’) state has been updated. • Render • Commit 10 How React renders ?
11. Waiter State update 11
12. Waiter State update Triggers Kitchen 12
13. Waiter State update Triggers Kitchen Render ! Kitchen 13
14. Process of requesting and serving is called Rendering. 14
15. • Rendering must be a pure calculation • Same inputs & same outputs • It minds it’s own business 15 Things to consider while Rendering
16. Importance of performance optimisation in React applications. only the speedy survive in this race ! 16
17. • User Experience 17 Why we should Optimise React Website?
18. • User Experience • Higher conversion rates and better user retention 18 Why we should Optimise React Website?
19. • User Experience • Higher conversion rates and better user retention • SEO Rank 19 Why we should Optimise React Website?
20. • User Experience • Higher conversion rates and better user retention • SEO Rank • Reduced Costs 20 Why we should Optimise React Website?
21. • User Experience • Higher conversion rates and better user retention • SEO Rank • Reduced Costs • Competitive Advantage 21 Why we should Optimise React Website?
22. React Basics 22
23. • Reconciliation • Virtual DOM • Component lifecycle methods 23 React Basics
24. Identifying Performance Bottlenecks 24
25. • Excessive re-renders • Unnecessary component updates • Large component trees • Ine ff icient data fetching • Slow rendering of lists 25 Few common reasons for slow performance
26. Tools to identify performance 26
27. • Chrome Dev tools • React Dev tools • React Pro f iler • Web pack Bundle Analyser • Lighthouse • Many more 27 Tools to identify performance
28. • Chrome Dev tools • React Dev tools • React Pro f iler (supported on v16.5+) • Web pack Bundle Analyser • Lighthouse • Many more 28 Tools to identify performance
29. Demo of performance tools 29
30. Strategies for Optimisation Let’s dive in ! 30
31. • Memoization techniques • React hooks optimisation • Code splitting and lazy loading • Server-side rendering (SSR) and static site generation (SSG) • Optimising network requests (e.g., caching, prefetching) • Optimise State Management • Use Keys Correctly • Performance Testing • Reduce DOM Manipulation • Optimise Image Loading • Bundle Optimisation • Virtualisation of List 31 Plan of Action
32. Hands On Demo 32
33. Fun Activity 33
34. Real-world examples & Case Studies 34
35. • Pinterest • Walmart • Airbnb • Net f lix • Facebook 35 Case study
38. First Paint Time to interactive 1.7 sec Latest 38
40. • Code Splitting • Image Optimisation • Responsive Design • Prefetching 40 Techniques used
41. Best practices 41
42. • SOLID principles in React 42 Best practices
43. S: Single Responsibility Each module has one reason to change 43
44. O: Open/Closed Open for Extensions Closed for modi f ications 44
45. L: Liskov Substitution Useful in Component Design If B extends A, anywhere you use A you should be able to use B. 45
46. I: Interface Segregation Discard unused/ irrelevant methods Don't make a component rely on props it doesn't care about. 46
47. D: Dependency Inversion High-level code shouldn't depend on implementation details always use an abstraction. hide the wiring behind the wall 47
48. • SOLID principles in React • Prefer functional components over class components 48 Best practices
49. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) 49 Best practices
50. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) • Virtualise Large Lists 50 Best practices
51. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) • Virtualise Large Lists • Minimise Third-Party Dependencies 51 Best practices
52. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) • Virtualise Large Lists • Minimise Third-Party Dependencies • Optimise Network Requests 52 Best practices
53. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) • Virtualise Large Lists • Minimise Third-Party Dependencies • Optimise Network Requests • Optimise Images, Assets, Fonts 53 Best practices
54. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) • Virtualise Large Lists • Minimise Third-Party Dependencies • Optimise Network Requests • Optimise Images, Assets, Fonts • Regularly Refactor and Improve 54 Best practices
55. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) • Virtualise Large Lists • Minimise Third-Party Dependencies • Optimise Network Requests • Optimise Images, Assets, Fonts • Regularly Refactor and Improve • Always use latest versions 55 Best practices
56. • SOLID principles in React • Prefer functional components over class components • Keep state minimal (Use context/ redux for state management) • Virtualise Large Lists • Minimise Third-Party Dependencies • Optimise Network Requests • Optimise Images, Assets, Fonts • Regularly Refactor and Improve • Always use latest versions • Use Linter 56 Best practices
57. Common Mistakes to Avoid 57
58. • Updating state or props unnecessarily 58 Common Mistakes to Avoid
59. • Updating state or props unnecessarily • Making too many or unnecessary network requests 59 Common Mistakes to Avoid
60. • Updating state or props unnecessarily • Making too many or unnecessary network requests • Overuse of local component state 60 Common Mistakes to Avoid
61. • Updating state or props unnecessarily • Making too many or unnecessary network requests • Overuse of local component state • Overuse of too many third-party libraries 61 Common Mistakes to Avoid
62. • Updating state or props unnecessarily • Making too many or unnecessary network requests • Overuse of local component state • Overuse of too many third-party libraries • Large images and unoptimised assets 62 Common Mistakes to Avoid
63. • Updating state or props unnecessarily • Making too many or unnecessary network requests • Overuse of local component state • Overuse of too many third-party libraries • Large images and unoptimised assets • Large initial bundle size 63 Common Mistakes to Avoid
64. • Updating state or props unnecessarily • Making too many or unnecessary network requests • Overuse of local component state • Overuse of too many third-party libraries • Large images and unoptimised assets • Large initial bundle size • Failing to monitor and analyse performance 64 Common Mistakes to Avoid
65. • Updating state or props unnecessarily • Making too many or unnecessary network requests • Overuse of local component state • Overuse of too many third-party libraries • Large images and unoptimised assets • Large initial bundle size • Failing to monitor and analyse performance • Rendering everything on the client side 65 Common Mistakes to Avoid
66. • Updating state or props unnecessarily • Making too many or unnecessary network requests • Overuse of local component state • Overuse of too many third-party libraries • Large images and unoptimised assets • Large initial bundle size • Failing to monitor and analyse performance • Rendering everything on the client side • Duplicate libraries • Unused code 66 Common Mistakes to Avoid
67. Advice from Personal Experience: Nidhi “You always know when you’re delivering quality or applying a patch. Conquer this feeling to always deliver the best. It might take time to deliver at first but once you make it a habit, trust me you can lower the time you look back at your code for refactoring. ” 67
68. Next Steps 68
69. Quiz (You can win some prizes) 69
70. Special Thanks & Motivation 70 70 70
71. Let’s Connect 71
72. References • Code splitting: https://www.youtube.com/watch?v=JU6sl_yyZqs • Blog: https://www.freecodecamp.org/news/measure-and-improve- performance-of-react-apps/ • Video: https://www.youtube.com/watch?v=CaShN6mCJB0 • Solid principles: https://www.youtube.com/watch?v=Ix6JoarGYiA • Case Study : https://medium.com/dev-channel/a-pinterest-progressive- web-app-performance-case-study-3bd6ed2e6154 72
73. Any Questions ? 73
74. Your Feedback Matters 74
75. Thank you ! 🙏 75