Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Why I am hooked on the future of React

94 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Why I am hooked on the future of React

  1. 1. © ABL - The Problem Solver 1
  2. 2. Why I am hooked on the future of React Maurice de Beijer @mauricedb © ABL - The Problem Solver 2
  3. 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
  4. 4. The React Newsletter © ABL - The Problem Solver 5 http://bit.ly/ReactNewsletter
  5. 5. React Hooks © ABL - The Problem Solver 6
  6. 6. The problem with classes © ABL - The Problem Solver 7
  7. 7. this © ABL - The Problem Solver 8
  8. 8. Fat arrow for some functions © ABL - The Problem Solver 9
  9. 9. Single responsibility in multiple functions © ABL - The Problem Solver 10
  10. 10. Functional Components © ABL - The Problem Solver 11
  11. 11. The Problem © ABL - The Problem Solver 12
  12. 12. And © ABL - The Problem Solver 13
  13. 13. If your only tool … © ABL - The Problem Solver 14
  14. 14. Deeply Nested Components © ABL - The Problem Solver 15
  15. 15. Many are wrappers to add props © ABL - The Problem Solver 16
  16. 16. But… © ABL - The Problem Solver 17
  17. 17. State © ABL - The Problem Solver 18
  18. 18. useState() © ABL - The Problem Solver 19
  19. 19. Just State © ABL - The Problem Solver 20
  20. 20. Side Effects © ABL - The Problem Solver 21
  21. 21. useEffect() © ABL - The Problem Solver 22
  22. 22. Context © ABL - The Problem Solver 23
  23. 23. Render Props © ABL - The Problem Solver 24
  24. 24. useContext() © ABL - The Problem Solver 25
  25. 25. 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
  26. 26. Custom Hooks © ABL - The Problem Solver 27
  27. 27. Custom Hooks © ABL - The Problem Solver 28
  28. 28. Using The Hook © ABL - The Problem Solver 29
  29. 29. Rules of Hooks © ABL - The Problem Solver 30
  30. 30. 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
  31. 31. Hooks are optional © ABL - The Problem Solver 32
  32. 32. Suspense © ABL - The Problem Solver 33
  33. 33. Suspense • A generic way for components to suspend rendering • Loading additional components • Fetching data © ABL - The Problem Solver 34
  34. 34. Suspense & Lazy Loading © ABL - The Problem Solver 35
  35. 35. The problem of loading to much code © ABL - The Problem Solver 36
  36. 36. React.lazy() © ABL - The Problem Solver 37
  37. 37. Suspense & Fetching Data © ABL - The Problem Solver 38
  38. 38. The problem of maintaining state © ABL - The Problem Solver 39
  39. 39. Loading an Asynchronous Resource © ABL - The Problem Solver 40
  40. 40. Creating an Asynchronous Resource © ABL - The Problem Solver 41
  41. 41. Asynchronous Rendering © ABL - The Problem Solver 42
  42. 42. The problem with rendering © ABL - The Problem Solver 43
  43. 43. Strict Mode © ABL - The Problem Solver 44
  44. 44. Enabling Asynchronous Rendering © ABL - The Problem Solver 45
  45. 45. Scheduling work © ABL - The Problem Solver 46
  46. 46. Maurice de Beijer - @mauricedb © ABL - The Problem Solver 47

×