The document discusses the history and evolution of React components from classes to hooks. It introduces hooks as a new way to use state and other React features without writing classes. Hooks allow extracting component logic into reusable functions. This improves code reuse and makes components more readable and composable. The document outlines the basic hooks like useState, useEffect, and useContext as well as additional hooks and rules for using hooks.

1. Why I am hooked on
the future of React
Maurice de Beijer - @mauricedb

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

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

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

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

6. Class
Components
© ABL - The Problem Solver 6

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

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

9. this
© ABL - The Problem Solver 9

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

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

12. Functional
Components
© ABL - The Problem Solver 12

13. The
Problem
© ABL - The Problem Solver 13

14. And
© ABL - The Problem Solver 14

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

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

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

18. Render
Props
© ABL - The Problem Solver 18

19. But…
© ABL - The Problem Solver 19

20. Introducing
Hooks
© ABL - The Problem Solver 20

21. Open
Mind
© ABL - The Problem Solver 21

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

23. Just
State
© ABL - The Problem Solver 23

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

25. The
Context
© ABL - The Problem Solver 25

26. Render
Props
© ABL - The Problem Solver 26

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

28. All hooks
 Basic hooks
 useState()
 useEffect()
 useContext()
 Additional Hooks
 useReducer()
 useMutationEffect()
 useLayoutEffect ()
 useCallback()
 useMemo()
 useRef()
 useImperativeHandle()
 useDebugValue()
 Custom hooks
 …
© ABL - The Problem Solver 29

29. Custom
Hooks
© ABL - The Problem Solver 30

30. Using
The
Hook
© ABL - The Problem Solver 31

31. Abortable
Fetch
Hook
© ABL - The Problem Solver 32

32. Fetch
Request
© ABL - The Problem Solver 33

33. Rules
of
Hooks
© ABL - The Problem Solver 34
 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

34. Hooks are
optional
© ABL - The Problem Solver 35

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

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