Successfully reported this slideshow.
Your SlideShare is downloading. ×

I am hooked on React

Ad

I am hooked on React
Maurice de Beijer - @mauricedb

Ad

 Maurice de Beijer
 The Problem Solver
 Microsoft MVP
 Freelance developer/instructor
 Twitter: @mauricedb
 Web: htt...

Ad

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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Check these out next

1 of 37 Ad
1 of 37 Ad
Advertisement

More Related Content

More from Maurice De Beijer [MVP] (20)

Advertisement

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

×