Demystifying React Hooks

A deeper dive into the world of React Hooks and my experience on migrating from a complex class-based react codebase to using react hooks in it and what were it's implications. Looking at React Hooks from a different perspective and how is it a Boon or Bain for ReactJS devs.

Transcript

1. DEMYSTIFYING REACT HOOKS Tathagat Thapliyal App (Mobile and Web)
2. Tathagat Thapliyal • Co-Founder @ Voz, A content community platform. thevoz.in • Software Developer and Mentor at Coding Blocks. • Student, Thapar University, Patiala.
3. Eder Labs
4. What, why and how?
5. What are react hooks? A react feature that lets you use state and lifecycles without writing a class based react component.
6. Why hooks?
7. But why react, first? • Reusable Components • Data Flow • Enjoy writing code
8. Problem with react? • Reusing stateful logic • Huge Components • Class is confusing
9. Dang It! It should work
10. Class based component Most forgetful and toughest error to figure out for beginners Might need to duplicate this in some other component Code smelling all over the place
11. Ways to deal with the problems? • Higher Order Components (HOC) • Render Props
12. HOC’s
13. Render Props • Objects • Arrays • Strings • Functions • Boolean
14. HOC’s WRAPPER HELL!!! ☹
15. RENDER PROPS WRAPPER HELL!!! ☹
16. So What? ‍♂ HOCs Render Props Hooks Reuse Stateful Logic ✅ ✅ ❓ Explicit Props ❌ ✅ ❓ Composability ✅ ❌ ❓ No “Wrapper Hell” ❌ ❌ ❓
17. SPOILER ALERT!! HOCs Render Props Hooks Reuse Stateful Logic ✅ ✅ ✅ Explicit Props ❌ ✅ ✅ Composability ✅ ❌ ✅ No “Wrapper Hell” ❌ ❌ ✅
18. Power Of Hooks
19. Some Hooks API Similar to componentDidMount and componentDidUpdate. Piece of state is referred by this variable. To use the piece of state inside functional component. Similar to this.setstate({})
20. More Hooks API’s Basic Hooks • useState() • useContext() • useEffect() Advanced Hooks • useReducer() • useCallback() • useEffect() • useMemo() • useRef()
21. Conclusion ? • Easier to work with . • Easier to test. • More readability. • Few lines of code. • No new component formation on DOM.
22. Who Wins?
23. THANK YOU !! https://www.github.com/tathagat2006 https://twitter.com/sumoneisback001 @thereactboy