Slide 1
Slide 1 text
Introducing React Hooks
Rizal Ibnu
Software Engineer @kumparan
Slide 2
Slide 2 text
What, Why & How ?
Slide 3
Slide 3 text
What, Why & How ?
Slide 4
Slide 4 text
What are Hooks?
Slide 5
Slide 5 text
What are
Hooks?
?
Slide 6
Slide 6 text
What are
Hooks? ?
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
What, Why & How ?
Slide 9
Slide 9 text
Why do we need Hooks?
Slide 10
Slide 10 text
Why do we use React?
● Reusable components
● Sensible data flow
● It’s fun to code!
Slide 11
Slide 11 text
Problems with writing React Class
Component?
● How to reuse stateful logic
● Huge component
● Class is confusing (for both humans and machines)
Slide 12
Slide 12 text
React Class Component
Slide 13
Slide 13 text
Might have to reuse this in some other components
React Class Component
Slide 14
Slide 14 text
React Class Component
Split all over the place
Slide 15
Slide 15 text
How we deal with them?
● Mixins (The old way)
● Higher-Order Components a.k.a HOC
● Render Props
Slide 16
Slide 16 text
HOC
Slide 17
Slide 17 text
HOC
Slide 18
Slide 18 text
HOC
Slide 19
Slide 19 text
HOC
Slide 20
Slide 20 text
HOC
Maybe?
Slide 21
Slide 21 text
HOC
Slide 22
Slide 22 text
HOC
Slide 23
Slide 23 text
HOC
Slide 24
Slide 24 text
HOC
Slide 25
Slide 25 text
HOC
Slide 26
Slide 26 text
HOC
Slide 27
Slide 27 text
HOC
WRAPPER HELL
Slide 28
Slide 28 text
HOC Render Props Hooks
Reuse Stateful Logic
Explicit Props
Composability
No “Wrapper Hell”
Slide 29
Slide 29 text
Render Props
Slide 30
Slide 30 text
Render Props
Slide 31
Slide 31 text
Render Props
Slide 32
Slide 32 text
Render Props
Slide 33
Slide 33 text
Render Props
Slide 34
Slide 34 text
Render Props
Slide 35
Slide 35 text
Render Props
WRAPPER HELL
Slide 36
Slide 36 text
HOC Render Props Hooks
Reuse Stateful Logic
Explicit Props
Composability
No “Wrapper Hell”
Slide 37
Slide 37 text
HOC Render Props Hooks
Reuse Stateful Logic
Explicit Props
Composability
No “Wrapper Hell”
SPOILER ALERT
Slide 38
Slide 38 text
What, Why & How ?
Slide 39
Slide 39 text
HOC
Render
Props
Hooks
Slide 40
Slide 40 text
Let’s code
Slide 41
Slide 41 text
HOC
Render
Props
Hooks
Slide 42
Slide 42 text
Hooks
Slide 43
Slide 43 text
Hooks
Slide 44
Slide 44 text
HOC Render Props Hooks
Reuse Stateful Logic
Explicit Props
Composability
No “Wrapper Hell”
Slide 45
Slide 45 text
But nothing is perfect
Slide 46
Slide 46 text
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.
Slide 47
Slide 47 text
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)
Slide 48
Slide 48 text
Hooks API
Basic Hooks Additional Hooks
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
https://reactjs.org/docs/hooks-reference.html
Slide 49
Slide 49 text
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)
Slide 50
Slide 50 text
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
Slide 51
Slide 51 text
END GAME