Introducing React Hooks

Introducing React Hooks

Transcript

1. Introducing React Hooks Rizal Ibnu Software Engineer @kumparan
2. What, Why & How ?
3. What, Why & How ?
4. What are Hooks?
5. What are Hooks? ?
6. What are Hooks? ?
7. What are Hooks? Hooks are a new addition in React 16.8. They let you use state and other React features (such as lifecycle) without writing a class.
8. What, Why & How ?
9. Why do we need Hooks?
10. Why do we use React? • Reusable components • Sensible data flow • It’s fun to code!
11. Problems with writing React Class Component? • How to reuse stateful logic • Huge component • Class is confusing (for both humans and machines)
12. React Class Component
13. Might have to reuse this in some other components React Class Component
14. React Class Component Split all over the place
15. How we deal with them? • Mixins (The old way) • Higher-Order Components a.k.a HOC • Render Props
16. HOC
17. HOC
18. HOC
19. HOC
20. HOC Maybe?
21. HOC
22. HOC
23. HOC
24. HOC
25. HOC
26. HOC
27. HOC WRAPPER HELL
28. HOC Render Props Hooks Reuse Stateful Logic Explicit Props Composability No “Wrapper Hell”
29. Render Props
30. Render Props
31. Render Props
32. Render Props
33. Render Props
34. Render Props
35. Render Props WRAPPER HELL
36. HOC Render Props Hooks Reuse Stateful Logic Explicit Props Composability No “Wrapper Hell”
37. HOC Render Props Hooks Reuse Stateful Logic Explicit Props Composability No “Wrapper Hell” SPOILER ALERT
38. What, Why & How ?
39. HOC Render Props Hooks
40. Let’s code
41. HOC Render Props Hooks
42. Hooks
43. Hooks
44. HOC Render Props Hooks Reuse Stateful Logic Explicit Props Composability No “Wrapper Hell”
45. But nothing is perfect
46. Rule of Hooks 1. Only Call Hooks at the Top Level Don’t call Hooks inside loops, conditions, or nested functions. 2. Only Call Hooks from React Functions Not from regular JS functions or inside class components, but you can call them from custom hooks.
47. About Hooks • No breaking change • Class still works • It will cover all use cases for classes! (except getSnapshotBeforeUpdate and componentDidCatch , but they plan to add them soon)
48. Hooks API Basic Hooks Additional Hooks useState useEffect useContext useReducer useCallback useMemo useRef useImperativeHandle useLayoutEffect useDebugValue https://reactjs.org/docs/hooks-reference.html
49. How to try Hooks yarn add react@^16.8.0 yarn add react-dom@^16.8.0 (web) yarn add react-native@^0.59.0 (react native) Recommended yarn add eslint-plugin-react-hooks --dev Code Example https://github.com/rizalibnu/ReactHooksExample (web) https://github.com/rizalibnu/ReactNativeHooksExample (react native)
50. Reference • https://reactjs.org/docs/hooks-intro.html • https://facebook.github.io/react-native/blog/2019/03/12/releasing-re act-native-059 • https://www.slideshare.net/AikdanaiSidhikosol/react-hooks-101
51. END GAME