This document discusses the history and evolution of React components from classes to hooks. It covers the problems with class components, such as complex this bindings and lifecycle methods. Hooks are introduced as a way to use state and side effects in function components by using functions like useState, useEffect and useContext. Custom hooks are also discussed as a way to extract component logic into reusable functions. The document emphasizes that hooks are optional and classes will continue to work, but hooks allow for more flexible and composable components.

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