The React team rewrote the book on developing components. Before we had a choice between classes and functional components. Yet many components needed to be classes. A functional component was often too limited. Now, using hooks, we can extend functional components to be as powerful as we want. Suspense and asynchronous rendering is in the future of React. It will make large applications much more responsive and easier to deal with. Getting started with suspense and asynchronous rendering isn't hard as you will discover. Come to this session to learn what React hooks are and how to get started using hooks. But be warned, once seen React hooks can’t be unseen and your React components will never be the same again.

1. © ABL - The Problem Solver 1

2. Why I am hooked on the
future of React
Maurice de Beijer
@mauricedb
© ABL - The Problem Solver 2

3. 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
ABL - The Problem Solver 3

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

6. React Hooks
© ABL - The Problem Solver 6

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

8. this
© ABL - The Problem Solver 8

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

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

11. Functional Components
© ABL - The Problem Solver 11

12. The Problem
© ABL - The Problem Solver 12

13. And
© ABL - The Problem Solver 13

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

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

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

17. But…
© ABL - The Problem Solver 17

18. State
© ABL - The Problem Solver 18

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

20. Just State
© ABL - The Problem Solver 20

21. Side Effects
© ABL - The Problem Solver 21

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

23. Context
© ABL - The Problem Solver 23

24. Render Props
© ABL - The Problem Solver 24

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

26. 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 26

27. Custom Hooks
© ABL - The Problem Solver 27

28. Custom Hooks
© ABL - The Problem Solver 28

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

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

31. Rules of Hooks
• 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
© ABL - The Problem Solver 31

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

33. Suspense
© ABL - The Problem Solver 33

34. Suspense
• A generic way for components to suspend rendering
• Loading additional components
• Fetching data
© ABL - The Problem Solver 34

35. Suspense & Lazy Loading
© ABL - The Problem Solver 35

36. The problem of loading to much code
© ABL - The Problem Solver 36

37. React.lazy()
© ABL - The Problem Solver 37

38. Suspense & Fetching Data
© ABL - The Problem Solver 38

39. The problem of maintaining state
© ABL - The Problem Solver 39

40. Loading an Asynchronous Resource
© ABL - The Problem Solver 40

41. Creating an Asynchronous Resource
© ABL - The Problem Solver 41

42. Asynchronous Rendering
© ABL - The Problem Solver 42

43. The problem with rendering
© ABL - The Problem Solver 43

44. Strict Mode
© ABL - The Problem Solver 44

45. Enabling Asynchronous Rendering
© ABL - The Problem Solver 45

46. Scheduling work
© ABL - The Problem Solver 46

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