Awesome React Hooks

Transcript

1. Demystifying React Hooks
2. • Software Developer and Mentor at Coding Blocks. • Co-Founder @ Voz, A content community platform thevoz.in • Final Year Student, B.E. Computer Engineering, Thapar University. Tathagat Thapliyal
3. Eder Labs
4. What, Why and How?
5. “To think creatively, we must be able to look afresh at what we normally take for granted” - George Keller A react feature that lets you use state and Lifecycles without writing a class based react component.
6. But, Why React, first ?
7. • Reusable Components • Data Flow • Enjoy writing code
8. Problem with REACT ?
9. • Reusing stateful logic • Huge Components • Class is confusing
10. Dang It! It should work
11. Most forgetful and toughest error to figure out for beginners Code smelling all over the place Might need to duplicate this in some other component Class based component
12. 1389 Lines!!! Dumb Component!
13. Ways to deal with the problems? • Higher Order Components (HOC Patterns) • Render Props
14. HOC Patterns
15. HOC
16. HOC Patterns
17. Render Props • Objects • Arrays • Strings • Functions • Boolean
18. WRAPPER HELL!!
20. So What? ‍♂ HOCs Render Props Hooks Reuse Stateful Logic ✅ ✅ ❓ Explicit Props ❌ ✅ ❓ Composability ✅ ❌ ❓ No “Wrapper Hell” ❌ ❌ ❓
21. SPOILER ALERT!! HOCs Render Props Hooks Reuse Stateful Logic ✅ ✅ ✅ Explicit Props ❌ ✅ ✅ Composability ✅ ❌ ✅ No “Wrapper Hell” ❌ ❌ ✅
22. UseState( )
23. UseEffect( )
24. More Hooks API’s Basic Hooks • useState() • useContext() • useEffect() Advanced Hooks • useReducer() • useCallback() • useEffect() • useMemo() • useRef()
25. • Easier to work with . • Easier to test. • More readability. • Few lines of code. • No new component formation on DOM. Conclusion?
26. Half screen photo slide if text is necessary References • https://www.polidea.com/blog/react-hooks-vs-wr apper-hell-writing-state-in-a-function-with-ease/ • https://blog.logrocket.com/frustrations-with-react- hooks/ • https://reactjs.org/docs/hooks-intro.html • https://medium.com/@jackyef/react-hooks-why- we-should-embrace-it-86e408663ad6
27. Thank You @tathagat2006 @sumoneisback001 Tathagat Thapliyal @tathagat2006