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

105 views

Published on

Presentation about why I am hooked on the future of React at the Rotterdam React meetup @mendix

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. Why I am hooked on the future of React @mauricedb © ABL - The Problem Solver 1
  2. 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. 3. The React Newsletter © ABL - The Problem Solver 4 http://bit.ly/ReactNewsletter
  4. 4. History of Components © ABL - The Problem Solver 5
  5. 5. Original Component API © ABL - The Problem Solver 6
  6. 6. Class Components © ABL - The Problem Solver 7
  7. 7. State & Lifecycle © ABL - The Problem Solver 8
  8. 8. The problem with classes © ABL - The Problem Solver 9
  9. 9. this © ABL - The Problem Solver 10
  10. 10. Fat arrow for some functions © ABL - The Problem Solver 11
  11. 11. Single responsibility in multiple functions © ABL - The Problem Solver 12
  12. 12. Functional Components © ABL - The Problem Solver 13
  13. 13. The Problem © ABL - The Problem Solver 14
  14. 14. And © ABL - The Problem Solver 15
  15. 15. If your only tool … © ABL - The Problem Solver 16
  16. 16. Deeply Nested Components © ABL - The Problem Solver 17
  17. 17. Many are wrappers to add props © ABL - The Problem Solver 18
  18. 18. Render Props © ABL - The Problem Solver 19
  19. 19. But… © ABL - The Problem Solver 20
  20. 20. Introducing Hooks © ABL - The Problem Solver 21
  21. 21. Open Mind © ABL - The Problem Solver 22
  22. 22. State © ABL - The Problem Solver 23
  23. 23. useState() © ABL - The Problem Solver 24
  24. 24. Just State © ABL - The Problem Solver 25
  25. 25. Side Effects © ABL - The Problem Solver 26
  26. 26. useEffect() © ABL - The Problem Solver 27
  27. 27. Context © ABL - The Problem Solver 28
  28. 28. Render Props © ABL - The Problem Solver 29
  29. 29. useContext() © ABL - The Problem Solver 30
  30. 30. 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
  31. 31. Custom Hooks © ABL - The Problem Solver 32
  32. 32. Custom Hooks © ABL - The Problem Solver 33
  33. 33. Using The Hook © ABL - The Problem Solver 34
  34. 34. Rules of Hooks © ABL - The Problem Solver 35
  35. 35. 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
  36. 36. Hooks are optional © ABL - The Problem Solver 37
  37. 37. Classes will keep on working © ABL - The Problem Solver 38
  38. 38. Maurice de Beijer @mauricedb © ABL - The Problem Solver 39

×