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

280 views

Published on

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

Published in: Technology
  • ⇒ www.HelpWriting.net ⇐ is a good website if you’re looking to get your essay written for you. You can also request things like research papers or dissertations. It’s really convenient and helpful.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Writing good research paper is quite easy and very difficult simultaneously. It depends on the individual skill set also. You can get help from research paper writing. Check out, please ⇒ www.HelpWriting.net ⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Check the source ⇒ www.WritePaper.info ⇐ This site is really helped me out gave me relief from headaches. Good luck!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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

×