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.

I am hooked on React

89 views

Published on

Presentation about the new React hooks capabilities at JS Poland 2018.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

I am hooked on React

  1. 1. I am hooked on React Maurice de Beijer - @mauricedb
  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 3 http://bit.ly/ReactNewsletter
  4. 4. History of Components © ABL - The Problem Solver 4
  5. 5. Original Component API © ABL - The Problem Solver 5
  6. 6. Class Components © ABL - The Problem Solver 6
  7. 7. State & Lifecycle © ABL - The Problem Solver 7
  8. 8. The problem with classes © ABL - The Problem Solver 8
  9. 9. this © ABL - The Problem Solver 9
  10. 10. Fat arrow for some functions © ABL - The Problem Solver 10
  11. 11. Single responsibility in multiple functions © ABL - The Problem Solver 11
  12. 12. Functional Components © ABL - The Problem Solver 12
  13. 13. The Problem © ABL - The Problem Solver 13
  14. 14. And © ABL - The Problem Solver 14
  15. 15. If your only tool … © ABL - The Problem Solver 15
  16. 16. Deeply Nested Components © ABL - The Problem Solver 16
  17. 17. Many are wrappers to add props © ABL - The Problem Solver 17
  18. 18. Render Props © ABL - The Problem Solver 18
  19. 19. But… © ABL - The Problem Solver 19
  20. 20. Introducing Hooks © ABL - The Problem Solver 20
  21. 21. Open Mind © ABL - The Problem Solver 21
  22. 22. useState() © ABL - The Problem Solver 22
  23. 23. Just State © ABL - The Problem Solver 23
  24. 24. useEffect() © ABL - The Problem Solver 24
  25. 25. The Context © ABL - The Problem Solver 25
  26. 26. Render Props © ABL - The Problem Solver 26
  27. 27. useContext() © ABL - The Problem Solver 27
  28. 28. All hooks  Basic hooks  useState()  useEffect()  useContext()  Additional Hooks  useReducer()  useMutationEffect()  useLayoutEffect ()  useCallback ()  useMemo()  useRef()  useImperativeMethods()  Custom hooks  … © ABL - The Problem Solver 29
  29. 29. Custom Hooks © ABL - The Problem Solver 30
  30. 30. Using The Hook © ABL - The Problem Solver 31
  31. 31. Abortable Fetch Hook © ABL - The Problem Solver 32
  32. 32. Fetch Request © ABL - The Problem Solver 33
  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. 34. Hooks are optional © ABL - The Problem Solver 35
  35. 35. Classes will keep on working © ABL - The Problem Solver 36
  36. 36. It’s a Proposal © ABL - The Problem Solver 37 https://reactjs.org/hooks
  37. 37. Maurice de Beijer @mauricedb maurice.de.beijer @gmail.com © ABL - The Problem Solver 38

×