Best Practices for Building Better React Apps

The talk was delivered by Nidhi Dadiya on 6/4/25 as part of the celebration of the Women's Day event IWD2025 organized by GDG Gandhinagar.
#IWD2025
#IWD25
#WTMIndia
#WTMIWD2025

Transcript

1. Nidhi Dadiya Best Practices for Building Better React Apps From Good to Great: Elevate Your React Skills with These Proven Techniques 1 IWD 2025 GDG Gandhinagar
2. Let’s start! 2
3. Why React? And not … everything else? 3
4. Why care about Best Practices? 4
5. Best Practices = Extra Effort I don’t need right now. 5
6. Best Practices = Extra Effort I don’t need right now. 6
7. Best Practices = Saving Future You from Debugging at 2AM. 7
8. Outline • Clean code habits • Performance tips • Avoiding beginner traps • Real-world practices 8
9. Clean Code Habits 9 Frameworks will come & go — clean habits stay forever.
10. • Component & Folder structure Clean code habits 10
13. • Component & Folder structure • Naming conventions Clean code habits 13
16. 16 Bad Better
17. • Component & Folder structure • Naming conventions • Reusability and DRY Clean code habits 17
19. • Component & Folder structure • Naming conventions • Reusability and DRY • Learn by doing rather than reading/watching Clean code habits 19
20. • Component & Folder structure • Naming conventions • Reusability and DRY • Learn by doing rather than reading/watching • Don't copy/paste code you don't understand Clean code habits 20
21. Performance Tips 21
22. Performance Tips • Lazy loading & Code spliting • Memoization • Optimising images/assets/fonts • Web workers • Virtualisation of lists • Optimising renders 22
23. Avoiding beginner traps 23
24. Avoiding beginner traps • State management overkill 24
25. Avoiding beginner traps • State management overkill • Prop drilling 25
26. Avoiding beginner traps • State management overkill • Prop drilling • useE ff ect misuse 26
27. Avoiding beginner traps • State management overkill • Prop drilling • useE ff ect misuse • Overusing Context API 27
28. Avoiding beginner traps • State management overkill • Prop drilling • useE ff ect misuse • Overusing Context API • Inline functions in JSX • Not using keys in lists 28
29. Real world practices 29
30. Real world practices & developer mindset • Writing maintainable code for teams • Code reviews & communication • Testing basics (even if just unit tests) • Learn to read docs — life skill! • Linting + formatting (Prettier, ESLint) • Using TypeScript 30
31. Life-Saving Developer Hacks 31
32. Life-Saving Developer Hacks • Master the basics (Html, css, js, how web works!) 32
33. Life-Saving Developer Hacks • Master the basics • Ask for help when stuck / take a break 33
34. Life-Saving Developer Hacks • Master the basics • Ask for help when stuck / take a break • Don't blindly apply every piece of advice found online 34
35. Life-Saving Developer Hacks • Master the basics • Ask for help when stuck / take a break • Don't blindly apply every piece of advice found online • Done is better than perfect 35
36. Life-Saving Developer Hacks • Master the basics • Ask for help when stuck / take a break • Don't blindly apply every piece of advice found online • Done is better than perfect • Stay open to learning new things/tools/methods • Master your dev tools(VSCode, Git, Chrome Inspector) 36
37. Life-Saving Developer Hacks • Understand the big picture behind your tasks • Communication skills • Take ownership of your career/life/project • Mentor young/junior devs • Continuously invest in your skills 37
38. • React DevTools • GitHub Copilot, ESLint, Prettier • Lighthouse • React Query / Tanstack Query • Zustand / Redux Toolkit • AI tools for dev productivity • Gitlens, Import cost, glean 38 Tools Recommended
39. Code for humans first, computer second. 39
40. How to stay consistent and not burn out! 40
41. Special Thanks & Motivation 41
42. Quick Quiz 42
43. Feedback! 43
44. Let’s Connect! 44
45. Thank You 45
46. References • https://speakerdeck.com/nidhidadiya18/maximizing-performance-advanced- strategies-for-optimising-react-applications • https://www.frontendjoy.com/p/5-simple-quotes-that-helped-me-stay-on- track-as-a-junior-developer-and-land-my-dream-job • https://www.frontendjoy.com/p/37-tips-from-a-senior-frontend-developer • https://www.youtube.com/watch?v=b0IZo2Aho9Y • https://www.youtube.com/watch?v=CaShN6mCJB0 • https://www.youtube.com/watch?v=Qwb-Za6cBws&t=359s 46