Good practices in React & functional programming

Transcript

1. Organizers & Sponsors Carlos Mafla @gigo6000 Ana Mafla @AnaMeMafla
3. Who am I? • Full-stack engineer at Bunny Studio Inc. • Open source & communities supporter • Cat lover (I have 6 cats!) • Organizer & Coach at Rails Girls Cali • React & React Native coach • I’m also a Bitcoin/Crypto enthusiast • Love mountain biking
4. Functional programming? Programming paradigm which has its roots in math. It aims to avoid the problems that come with: • shared state • mutable data • side effects which are common in object oriented programming (OOP).
6. Given the same inputs, it always returns the same output and it has not side effects
7. Given the same inputs, it always returns the same output and it has not side effects Side effects?
8. Immutability https://www.youtube.com/watch?v=Wo0qiGPSV-s Anjana Vakil: Immutable data structures for functional JS | JSConf EU
9. This is a must not do!
10. Do it like this :)
11. Do not…….
12. Not even this, I’m watching you...
13. Use container components for Redux
14. Some commonly used Mutate functions in JS • copyWithin • fill • pop • push • reverse • shift • sort • splice • Unshift https://doesitmutate.xyz/
15. Your best friends :D • concat • split • join • map • reduce • filter • find • findIndex • Object.assign ***
16. Libraries that help you treat your data
17. Libraries that help you ensure immutability of data
18. ES6 features you should already using! • Object.assign / Spread operator • Arrow functions
19. Best practices in React • Keep your code as cleaner as possible • DRY / Try to make you components reusable • Avoid too much logic within components • Use helper functions everytime, everywhere • ALWAYS use propTypes or similar (if using TS/Flow) • Try hooks, they tend to make your code smaller and less complex • Try to avoid using getDerivedStateFromProps • Use conditional assignment to avoid mutations • Split responsibilities • Migrate your deprecated lifecycle methods • Do not overload your useEffect / componentDidMount methods
20. Turn this
21. Into
22. And this
23. To something like this
25. Homework Try to identify mutations and overload functions in your components and Support local communities !
26. Thank you !