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.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

I am hooked on React

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

588

On Slideshare

0

From embeds

0

Number of embeds

3

Actions

Downloads

14

Shares

0

Comments

0

Likes

0

×