1. Why I am
hooked on the
future of React
@mauricedb
© ABL - The Problem Solver 1

2.  Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: http://www.TheProblemSolver.nl
 E-mail: maurice.de.beijer@gmail.com
2ABL - The Problem Solver

4. The React
Newsletter
© ABL - The Problem Solver 4
http://bit.ly/ReactNewsletter

5. History
of
Components
© ABL - The Problem Solver 5

6. Original
Component
API
© ABL - The Problem Solver 6

7. Class
Components
© ABL - The Problem Solver 7

8. State
&
Lifecycle
© ABL - The Problem Solver 8

9. The problem
with classes
© ABL - The Problem Solver 9

10. this
© ABL - The Problem Solver 10

11. Fat arrow for
some functions
© ABL - The Problem Solver 11

12. Single
responsibility
in multiple
functions
© ABL - The Problem Solver 12

13. Functional
Components
© ABL - The Problem Solver 13

14. The
Problem
© ABL - The Problem Solver 14

15. And
© ABL - The Problem Solver 15

16. If your only
tool …
© ABL - The Problem Solver 16

17. Deeply
Nested
Components
© ABL - The Problem Solver 17

18. Many are
wrappers to
add props
© ABL - The Problem Solver 18

19. Render
Props
© ABL - The Problem Solver 19

20. But…
© ABL - The Problem Solver 20

21. Introducing
Hooks
© ABL - The Problem Solver 21

22. Open
Mind
© ABL - The Problem Solver 22

23. State
© ABL - The Problem Solver 23

24. useState()
© ABL - The Problem Solver 24

25. Just
State
© ABL - The Problem Solver 25

26. Side Effects
© ABL - The Problem Solver 26

27. useEffect()
© ABL - The Problem Solver 27

28. Context
© ABL - The Problem Solver 28

29. Render
Props
© ABL - The Problem Solver 29

30. useContext()
© ABL - The Problem Solver 30

31. All hooks
 Basic hooks
 useState()
 useEffect()
 useContext()
 Additional Hooks
 useReducer()
 useLayoutEffect()
 useRef()
 useCallback()
 useMemo()
 useImperativeHandle()
 Custom hooks
 useDebugValue()
 Your custom hooks
© ABL - The Problem Solver 31

32. Custom
Hooks
© ABL - The Problem Solver 32

33. Custom
Hooks
© ABL - The Problem Solver 33

34. Using
The
Hook
© ABL - The Problem Solver 34

35. Rules
of
Hooks
© ABL - The Problem Solver 35

36. Rules
of
Hooks
© ABL - The Problem Solver 36
 Hooks can only be used in functional components
 Or in other hooks
 Not in class based components
 Hooks must always be created in the same order
 Must be outside loops, conditions or nested functions
 Hooks names must be prefixed with `use`
 There is an ESLint plugin to enforce these rules

37. Hooks are
optional
© ABL - The Problem Solver 37

38. Classes will
keep on
working
© ABL - The Problem Solver 38

39. Maurice de Beijer
@mauricedb
© ABL - The Problem Solver 39